Geolocalizar on Page Load con Google Maps y React JS

Tutoriales

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.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required