En este video tutorial te mostraré como obtener las coordenadas de la posición de un marcador de Google Maps después de haberlo arrastrado, usaremos la Geolocalización de HTML 5, y también explicaré como incrustar un mapa en nuestro sitio web usando la API de Google Maps, debajo del video encontrarás el código comentado del ejemplo para que pruebes su funcionamiento.
Espero que sea de tu ayuda, cualquier duda o aclaración comenta en este post y no olvides suscribirte a mi canal y seguirme en mis redes sociales.
Código
|
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 83 84 85 86 87 88 89 90 91 92 93 94 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Obtener coordenadas de un marcador </title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { width: 100%; height: 80%; } #coords{width: 500px;} </style> </head> <body > <div id="map"></div> <input type="text" id="coords" /> <script> var marker; //variable del marcador var coords = {}; //coordenadas obtenidas con la geolocalización //Funcion principal initMap = function () { //usamos la API para geolocalizar el usuario navigator.geolocation.getCurrentPosition( function (position){ coords = { lng: position.coords.longitude, lat: position.coords.latitude }; setMapa(coords); //pasamos las coordenadas al metodo para crear el mapa },function(error){console.log(error);}); } function setMapa (coords) { //Se crea una nueva instancia del objeto mapa var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center:new google.maps.LatLng(coords.lat,coords.lng), }); //Creamos el marcador en el mapa con sus propiedades //para nuestro obetivo tenemos que poner el atributo draggable en true //position pondremos las mismas coordenas que obtuvimos en la geolocalización marker = new google.maps.Marker({ map: map, draggable: true, animation: google.maps.Animation.DROP, position: new google.maps.LatLng(coords.lat,coords.lng), }); //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica //cuando el usuario a soltado el marcador marker.addListener('click', toggleBounce); marker.addListener( 'dragend', function (event) { //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng(); }); } //callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE function toggleBounce() { if (marker.getAnimation() !== null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } } // Carga de la libreria de google maps </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> </body> </html> |
Comentarios Facebook
Perfecto el video-tutorial Roger, me has salvado la vida… esperamos mas contenido como este.. Gracicas
Es excelente la aplicación. Ahora si quiero que esas coordenadas sean grabadas o pasadas a una variables de ambientes y pasarlas a otra página? Soy nuevo en esto y estoy aprendiendo desde CERO.
Me pareció excelente idea para agregarla a un botón y obtener coordenadas y sean grabadas o pasada a variables y grabadas para saber la localización donde viven los usuarios en alguna aplicación.
Gracias por la contribución y en espera de sus comentarios,
Cómo puedo pasar esas coordenadas a php?