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.