<!DOCTYPE html>
<html style="height:100%">
<head>
<title>Marker draggable en Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#divMap {
height: 500px;
width: 800px;
border-radius: 15px;
margin: 100px auto;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&libraries=&v=weekly">
</script>
<script type="text/javascript">
function initialize() {
// Configuración del mapa
var mapProp = {
center: new google.maps.LatLng(6.244338, -75.573553),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Agregando el mapa al tag de id divMap
var map = new google.maps.Map(document.getElementById("divMap"), mapProp);
// Creando un marker en el mapa
var marker = new google.maps.Marker({
position: new google.maps.LatLng(6.244338, -75.573553),
map: map,
title: 'Hello World!',
draggable: true //que el marcador se pueda arrastrar
});
// Registrando el evento drag, en este caso imprime
// en consola la latitud y longitud
google.maps.event.addListener(marker,'drag',function(event) {
console.log(event.latLng.lat());
document.getElementById("textLatitude").innerHTML = event.latLng.lat();
document.getElementById("textLongitude").innerHTML = event.latLng.lng();
});
}
// Inicializando el mapa cuando se carga la página
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="divMap"></div>
<center>
<h2>Coordenadas</h2>
<h3>Latitude</h3>
<p id="textLatitude">Latitude</p>
<h3>Longitude</h3>
<p id="textLongitude">Longitude</p>
</center>
</body>
</html>
