Geolocalizar on Page Load con Google Maps y React JS 15.4

React JS Tutoriales | | 👤 Crear un Post, Eventos Devs, Foro
Tiempo de lectura: 3 minuto(s)

Tabla de Contenidos

Demo Github

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.

Subscribirse
Notificar a
guest

1 Comment
antiguos
nuevos más votado
Inline Feedbacks
View all comments
trackback
La Ruta de la Tecnología: Conoce el nuevo Google Maps que guarda tus preferencias y atajos | Blog Collective Cloud Peru
5 años atrás

[…] beneficios del GPS, mapas por satélite y rastreo de rutas. Cada vez más, la popular aplicación Google Maps incluye ciertas ventajas que podrían facilitar el transporte en tan solo unos pasos. Sin embargo, […]