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.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure