Coordenadas de marcadores "arrastrables"

Elalux · #1 (**permalink**) 20/04/2012, 11:58

Que tal maestros, a continuación mi cuestión.

Estoy probando la versión 3 de la API de Googel Earth y estoy tratando de mostrar en forma interactiva las coordenadas de un marcador "arrastrable".

En la siguiente dirección pueden ver el proyecto:

http://www.yucatanproperties.com/coordenadas.php

Lo que deseo hacer es que al mover el marcador del mapa, se actualicen sus valores de latitud y longitud en la parte de debajo del mismo.

Ya le estuve moviendo pero sinceramente JavaScript no es ni por mucho mi fuerte y menos la versión 3 de la API de Google, quisiera solicitar su ayuda u orientación para lograr el efecto que describo.

Agradezco desde ahora cualquier ayuda.

Saludos.

Panino5001 · #2 (**permalink**) 20/04/2012, 15:27

Probá y leé: https://developers.google.com/maps/d...ascript/events

Código PHP:

  <!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

  html { height: 100% }

  body { height: 100%; margin: 0px; padding: 0px }

  #map_canvas { height: 100% }

</style>

<script type="text/javascript"

    src="https://maps.google.com/maps/api/js?sensor=false">

</script>

<script type="text/javascript">

function getCoords(marker){

    document.getElementById("loglat").innerHTML='Latitud: '+marker.getPosition().lat();

      document.getElementById("loglong").innerHTML='Longitud: '+marker.getPosition().lng();

}

function initialize() {

    var myLatlng = new google.maps.LatLng(20.990291,-89.613590);

    var myOptions = {

        zoom: 16,

        center: myLatlng,

        mapTypeId: google.maps.MapTypeId.ROADMAP,

    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    

   marker = new google.maps.Marker({

          position: myLatlng,

          draggable: true,

          title:"Hello World!"

    });

    google.maps.event.addListener(marker, "dragend", function() {

                    getCoords(marker);

    });

    

      marker.setMap(map);

    getCoords(marker);

    

  

  }

 
</script>

</head>

<body onload="initialize()">

  

<div id="map_canvas" style="width:400px; height:400px"></div><br>

<font color="#0000FF"><strong id="loglat">Latitud:</strong></font> 

 
<br>

<font color="#FF0000"><strong id="loglong">Longitud:</strong></font> 

 
</body>

</html>

Elalux · #3 (**permalink**) 20/04/2012, 20:23

Muchísimas grácias Panino5001 funcionó de maravilla.

Saludos.