Google Maps API

Marker draggable en Google Maps

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *