Blog
En este sencillo tutorial aprenderemos a realizar un marker draggable en Google Maps, para eso vamos a utilizar la función google.maps.event.addListener que nos permite registrar un evento determinado sobre un marker.
¿Cómo hacer un marker draggable en Google Maps?
Mediante un ejemplo vamos a mostrar cómo agregar el evento draggable a un marker. En este caso al ejecutar dicho evento vamos a imprimir en consola la latitud y longitud nueva del marker:
<!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>
html, body{
height:100%;
margin: 0px;
}
#googleMap{
width:100%;
height:100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
// Configuración del mapa
var mapProp = {
center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Agregando el mapa al tag de id googleMap
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
// Creando un marker en el mapa
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
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());
console.log(event.latLng.lng());
});
}
// Inicializando el mapa cuando se carga la página
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
Es importante prestar atención a la variable draggable que se le pasa por parámetro al marker cuando se lo crea, sin esa variable en true el marker no se puede hacer draggable.
Bueno gente, espero que les sea de gran utilidad este sencillo código y ante cualquier inconveniente no duden en comentar.
amigo y si tengo un objeto market con n elementos