Geolocalizar on Page Load con Google Maps y React JS 15.4
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
|
1 2 3 |
var map, marker, myLatlng, mapOptions, geoCoder, currentLoc, ubicacionActual; |
Creamos nuestro componente para Geolocalizar
|
1 2 3 |
var Geolocalizar = React.createClass({ |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
//Creamos la funcion para el botón 'Buscar mi ubicación' getUbicacion: function() { //Si el Navegador soporta Geolocalización HTML5 que proceda y si no enviamos una alerta if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; currentLoc = new google.maps.LatLng(lat, lng); //Eliminamos el marcador agregado previamente if (marker) { marker.setMap(null); } var popupContent = '<div id="content"><h5 align="center" id="firstHeading" class="heading">Tu ubicación! </h5></div>' var infowindow = new google.maps.InfoWindow({ content: popupContent }); map.setCenter(currentLoc);//Centramos nuestra ubicación en el centro del mapa //Personalizamos el icono de nuestra ubicación image = { url: 'images/mifp.jpg', // // ubicacion de la imagen de perfil scaledSize: new google.maps.Size(50, 50), // medidad de la imagen de perfil //origin: new google.maps.Point(0,0), // origin //anchor: new google.maps.Point(0, 0) // anchor }; //Creamos el marcador e instanciamos la imagen creada anteriormente marker = new google.maps.Marker({ position: currentLoc, map: map, zoom: 17, title: 'Mi Ubicación', icon:image }); infowindow.open(map,marker); }); } else { alert('Tu Navegador no soporta Geolocalización, por favor actualizalo!'); } }, |
Renderizamos el botón para Buscar mi ubicación, el icono de nuestra ubicación y otros elementos
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
render: function() { return ( <div className="form-group"> <h1>Geolocalizar on Page Load con Google Maps y React JS</h1> <div className="col-md-3"> <div className="input-group"> <button className="btn btn-default" id="buscarmi" onClick={this.getUbicacion}><i className="fa fa-location-arrow"></i>Buscar mi ubicación</button> </div> </div> </div> ); } }); |
Renderizamos el mapa
|
1 2 3 4 5 6 7 8 9 10 |
var Gmaps = React.createClass({ render: function() { return ( <div id="map"></div> ); } }); |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
var App = React.createClass({ //Después de renderizar el componente Gmaps, llamamos a la función componentDidMount para enlazar Google Maps con React y sus demas componentes componentDidMount: function() { //Iniciamos Geocoder geocoder = new google.maps.Geocoder(); //Geolocalizamos la ubicacion del usuario al entrer a la página myLatlng = navigator.geolocation.getCurrentPosition(function(position) { var geolocalizaralcargarpagina = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); //map.setCenter(geolocalizaralcargarpagina); var lat = position.coords.latitude; var lng = position.coords.longitude; ubicacionActual = new google.maps.LatLng(lat, lng); //Eliminamos el marcador agregado previamente if (marker) { marker.setMap(null); } var popupContent = '<div id="content"><h5 align="center" id="firstHeading" class="heading">Tu ubicación! </h5></div>' var infowindow = new google.maps.InfoWindow({ content: popupContent }); map.setCenter(ubicacionActual);//Centramos nuestra ubicación en el centro del mapa image = { url: 'images/mifp.jpg', // url scaledSize: new google.maps.Size(50, 50), // scaled size origin: new google.maps.Point(0,0), // origin anchor: new google.maps.Point(0, 0) // anchor }; marker = new google.maps.Marker({ position: ubicacionActual, map: map, zoom: 17, title: 'Mi Ubicación', icon:image }); infowindow.open(map,marker); }); //Le damos opciones a nuestro mapa mapOptions = { zoom: 17, center: myLatlng }; //Renderizamos el mapa map = new google.maps.Map(document.getElementById('map'), mapOptions); //Agregamos marcadores al mapa marker = new google.maps.Marker({ position: ubicacionActual, map: map, title: 'location' }); }, //Renderizamos los componentes Geolocalizar y Gmaps render : function() { return ( <div> <Geolocalizar /> <Gmaps /> </div> ) } }); |
Enviamos todo al div o capa #contenedor_mapa
|
1 2 3 |
ReactDOM.render(<App />, document.getElementById('contenedor_mapa')); |
En nuestra vista vamos a crear el div #contenedor_mapa
|
1 2 3 |
<div id="contenedor_mapa"> </div> |
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>
|
1 2 3 4 5 6 7 8 9 10 |
<!-- script --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> <script src="js/JSXTransformer.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=TUAPIKEYACA&libraries=places" async defer></script> <script src="js/application.js" type="text/jsx" ></script> </body> </html> |
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.
Artículos Relacionados
-
Clases nativas que te harán más productiva(o) en Bootstrap 4
-
Como Crear una API REST con Django 3.1.1 + Consumir Datos en una Aplicación Android – Parte 7 (Final)
-
Crear un SVG con Adobe Illustrator
-
Como Crear tu primer Formulario en React JS
-
Como Convertir un Array a un Archivo CSV en PHP
-
Como Crear Un CRUD con Django 4 (Python 3.11) y Bootstrap 5 – Parte 3
[…] 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, […]