Geolocalizar on Page Load con Google Maps y React JS 15.4

3 minuto(s)

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.