En mi pagina web quiero implementar el api de google maps, y que el usuario arrastre el marcador(Marker) en la ubicacion donde vive y luego mostrar la latitud y longitud en un input para posterior guardarlo en una base de datos.
Aquí como lo hice pero no me funciona:
<div id="map"></div>
<input type="text" id="coords" />
<script>
var marker;
var coords = {};
initMap = function ()
{
navigator.geolocation.getCurrentPosition(
function (position){
coords = {
lng: position.coords.longitude,
lat: position.coords.latitude
};
setMapa(coords);
},function(error){console.log(error);});
}
function setMapa (coords)
{
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 13,
center:new google.maps.LatLng(coords.lat,coords.lng),
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(coords.lat,coords.lng),
});
marker.addListener('click', toggleBounce);
marker.addListener( 'dragend', function (event)
{
document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
});
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1tGk92O2ExGvtxy6rIZkwC7xtuyzHymg&callback=initMap" type="text/javascript"></script>