Google Maps – Draggable

<!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>

Deja una respuesta

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