Revista Tecnología

Geolocalizar on Page Load con Google Maps y React JS

Publicado el 18 febrero 2017 por Juan Ricardo Castro Lurita @pepoflex

La velocidad de carga de los componentes en el DOM mediante React JS es muy buena, que pasa si usamos Geolocalizacion para mostrar nuestra ubicación vamos a experimentar como nos va. Voy a usar la versión 15.4.2 de React JS y la Geolocalizacion Nativa de HTML5 en el Navegador, básicamente convertimos los objetos que nos da Google API y los acoplamos y renderizamos como componentes en el DOM.

Antes de comenzar con el tutorial les recuerdo que en los bloques de códigos mas extensos explico que hace cada línea de código mediante comentarios. Bueno vamos con el tutorial:

Declaro mis variables que voy a emplear en el proyecto

Creamos nuestro componente para Geolocalizar

Creamos la función para el botón 'Buscar mi ubicación' al hacer click en el botón este llamará a esta función

Renderizamos el botón para Buscar mi ubicación, el icono de nuestra ubicación y otros elementos

Renderizamos el mapa

Cargamos la pagina index con la funcion navigator.geolocation.getCurrentPosition nativa de HTML5 para que nos detecte la ubicación al entrar a la Página

Enviamos todo al div o capa #contenedor_mapa

En nuestra vista vamos a crear el div #contenedor_mapa

Ahora no olvidemos instanciar los recursos necesarios para correr React JS y Google Maps, yo los instancio en la parte de abajo antes de cerrar la etiqueta </body>

Nota: Para que no te compliques dejo el codigo en el repo Github para que lo mires con calma y lo pruebes en tu servidor, al inicio de este articulo esta el botón Github para ir al repo y puedas descargarte todo el codigo fuente.

Por favor no olvides seguirnos en nuestras redes sociales, eso nos motiva mucho a seguir adelante.

Espero que te sea muy útil este tutorial, nos vemos hasta un próximo tutorial.


También podría interesarte :

Volver a la Portada de Logo Paperblog

Quizás te interesen los siguientes artículos :

  • Juegos ocultos en google para distraerse

    Juegos ocultos google para distraerse

    1.- el clásico tres en raya en tu computador fácil solo debes buscar “Tres en Raya” y aparecerá en la parte superior, aquí ellink2. Leer el resto

    Por  Decisem Decisem
    INFANCIA, TECNOLOGÍA
  • Google trabaja en un nuevo sistema operativo

    Google trabaja nuevo sistema operativo

    Mucho secretismo entorno al nuevo sistema operativo en el que ha empezado a trabajar Google. Lo único que se sabe de él es que está al margen de Linux. Leer el resto

    Por  Ecualink
    COMUNICACIÓN, TECNOLOGÍA
  • Ha muerto Google Now

    muerto Google

    Anoche el portal Android Police anunciaba una nueva actualización de la aplicación de búsqueda de Google para Android, al parecer no era más que una versión bet... Leer el resto

    Por  Moktar
    MÓVILES, TECNOLOGÍA
  • Allo el WhatsApp del futuro de Google

    El gigante Google nos sorprende una vez más, el día de hoy presentó “Allo, una aplicación de mensajería móvil instantánea, cuenta con un asistente virtual o... Leer el resto

    Por  Juan Ricardo Castro Lurita
    TECNOLOGÍA
  • Google prepara Andromeda, un mix de Android y Chrome OS…

    Google prepara Andromeda, Android Chrome

    … Y lo está probando en una tablet Nexus 9. Una de las novedades que nos prepara Google para el 4 de Octubre es -además del nuevo Píxel- el sistema operativo... Leer el resto

    Por  Tecnodiario
    TECNOLOGÍA
  • ¿Vivir para siempre? Google lo cree posible

    ¿Vivir para siempre? Google cree posible

    ¿Puede Google vencer a la muerte?Ésto es lo que se preguntó la mítica revista Time en una portada de 2013, cuando el gigante de los buscadores anunció su... Leer el resto

    Por  José María Acuña Morgado
    COMUNICACIÓN, INFORMÁTICA, TECNOLOGÍA
  • Los 18 de Google

    Con una animación, llamada Doodle (ubicada donde normalmente está el logo), este martes el gigante del internet celebra sus 18 primaveras con un sin fin de... Leer el resto

    Por  Juan Ricardo Castro Lurita
    TECNOLOGÍA

Revista