Obtener ubicacion y mostrarla en un mapa de Google Maps
La geolocalizacion de los navegadores permite a las aplicaciones acceder a la ubicación del usuario, para esto se necesita una solicitud y que el usuario acepte, si el usuario acepta la solicitud de geolocalizacion entonces la aplicación puede obtener la ubicación y usarla.
En este articulo les traigo un gist con el cual podrán obtener la ubicación por medio de las coordenadas latitud y longitud y después estas coordenadas las colocaremos en Google Maps para que se muestre la ubicación en el mapa.
Código
Este es el código completo para demostrar el funcionamiento, no se necesita de ninguna librería externa mas que de la API de Google Maps.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!– Powered by Evilnapsis at http://evilnapsis.com/ –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Obtener ubicacion</title> | |
| </head> | |
| <body> | |
| <h1>Obtener ubicacion y mostrarla en un mapa</h1> | |
| <div id="map" style="width:100%;height:600px;"></div> | |
| <script> | |
| navigator.geolocation.getCurrentPosition(function(location) { | |
| console.log(location.coords.latitude); | |
| console.log(location.coords.longitude); | |
| var map; | |
| var center = {lat: location.coords.latitude, lng: location.coords.longitude}; | |
| function initMap() { | |
| map = new google.maps.Map(document.getElementById('map'), { | |
| center: center, | |
| zoom: 6 | |
| }); | |
| var marker = new google.maps.Marker({ | |
| position: {lat: location.coords.latitude, lng: location.coords.longitude}, | |
| map:map, | |
| title: 'Ubication' | |
| }); | |
| } | |
| initMap(); | |
| }); | |
| </script> | |
| <script async defer | |
| src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuBEidKGDuQo7Bzf1uRg47MPaRRlEesw0"> | |
| </script> | |
| </body> | |
| </html> |
El código para obtener las coordenadas es:
[code language=”javascript”]navigator.geolocation.getCurrentPosition(function(location) {
console.log(location.coords.latitude);
console.log(location.coords.longitude);
});
Al momento de ejecutarse se mostrara una solicitud para que el usuario acepte la geolocalizacion y si este acepta se obtienen las coordenadas y posteriormente se muestran en la consola, o segun el primer ejemplo, se muestra un mapa.
Resultado
Este es el resultado una vez que ejecutamos el código y aceptamos la solicitud.
Espero este ejemplo les sirva 😉
No se olviden de dejar sus comentarios y suscribirse al blog o a mi canal de youtube.
excelente, muchas gracias. Lo provare.
saludos
Saludos!