Problema al capturar la coordenada dinamica en Google Maps API v3 ?

Sumerio · 22 Julio 2012, 07:32 AM

Hola buenas ante todo, tengo un problema, es que tengo estoy haciendo una aplicacion que me permita guardar la entrada y salida de un vehiculo, pero ante todo necesito capturar la coordenada por medio de google maps API v3, lo que voy en avance es que me cuando le proporciono una coordenada de inicio en el Google Maps me ubica la ubicacion con el Marker, y he probado con dos cajas de texto uno de longitud y latitud, y si me captura la coordenada que establecido como predeterminado, pero cuando muevo el marker no se actualiza la coordenada en los textboxs, alguien me puede ayudar en mi problema, ya que he estado investigando en la web, se encuentra algunos ejemplos, pero ello utilizaban la version V2 de google maps, y ahora que lo pruebo sus metodos no me funcionan del todo. Les dejo mi codigo completo a fin de que alguien me pueda ayudar en mi problema.
Gracias.

Código [Seleccionar]

<!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=true"> </script> 

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/geocode/output?parameters"> </script>      
     
    <script type="text/javascript" src="C:/Users/Public/Documents/INNOVAXIONES/js/jquery-1.7.2.min.js"> </script> 
     
    <script type="text/javascript">   
         
        //Declaramos las variables que vamos a user var lat = null;  
        var lat = null; 
        var lng = null; 
        var map = null; 
        var geocoder = null; 
        var marker = null;   

        jQuery(document).ready(function(){    
           //obtenemos los valores en caso de tenerlos en un formulario ya guardado en la base de datos 
           lat = jQuery('#lat').val();  
           lng = jQuery('#lng').val();  
           //Asignamos al evento click del boton la funcion codeAddress  
           jQuery('#pasar').click(function(){   
               codeAddress();      
               return false;    
           });    
           //Inicializamos la función de google maps una vez el DOM este cargado  
           initialize();  
        });   
         
        function initialize() {   
         
            geocoder = new google.maps.Geocoder();   
                 
            //Si hay valores creamos un objeto Latlng    
           if(lat !='' && lng != '')    
           {           
                var myLatlng = new google.maps.LatLng(lat,lng);    
           }    
           else    
           {                 
                var myLatlng = new google.maps.LatLng(-12.1175,-77.043056);   
           }   

            
           //Definimos algunas opciones del mapa a crear      
            var myOptions = {     
                zoom: 14,   
                center: myLatlng,   
                mapTypeId: google.maps.MapTypeId.ROADMAP    
            }    
                 
             
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
             
            marker = new google.maps.Marker({      
                map: map,//el mapa creado en el paso anterior      
                position: myLatlng,//objeto con latitud y longitud    
                draggable: true //que el marcador se pueda arrastrar     
            });  
             
             
            /* 
             
                //draggable: true //que el marcador se pueda arrastrar     
            google.maps.event.addListener(map, 'zoom_changed', function() {     
                setTimeout(moveToDarwin, 3000);   
            });     
            var marker = new google.maps.Marker({        
                position: myLatlng,      
                map: map,      
                title:"Aqui me encuentro!"   
            });   
         
            google.maps.event.addListener(marker, 'click', function() {  
                map.setZoom(8);   
            }); 
             
            ///// EVENTO Place Marker 
            google.maps.event.addListener(map, 'click', function(event) {  
                placeMarker(event.latLng);  
            });  
            */ 
            updatePosition(myLatlng);   
        }   
         
        //alert("lat"); 
         
        /* 
        function moveToDarwin() {  
            var darwin = new google.maps.LatLng(-12.1175,-77.043056);  
            map.setCenter(darwin);  
        } 
         
        // Evento Points Marker 
         
        function placeMarker(location) {   
            var marker = new google.maps.Marker({   
                position: location,      
                map: map  
            });  
            map.setCenter(location);  
        } 
         
        /// Evento Mensaje por Marker 
         
        function attachSecretMessage(marker, number) {  
            var message = ["This","is","the","secret","message"];  
            var infowindow = new google.maps.InfoWindow({  
                content: message[number],     
                size: new google.maps.Size(50,50)  
            });   
             
            google.maps.event.addListener(marker, 'click', function() {   
                infowindow.open(map,marker);  
            }); 
        } 
        */ 
        //funcion que traduce la direccion en coordenadas    
       function codeAddress() {                  
           //obtengo la direccion del formulario       
           var address = document.getElementById("direccion").value;     
           //hago la llamada al geodecoder        
           geocoder.geocode( { 'address': address}, function(results, status) {     
               //si el estado de la llamado es OK       
               if (status == google.maps.GeocoderStatus.OK) {   
                   //centro el mapa en las coordenadas obtenidas     
                   map.setCenter(results[0].geometry.location);     
                   //coloco el marcador en dichas coordenadas        
                   marker.setPosition(results[0].geometry.location);    
                   //actualizo el formulario                
                   updatePosition(results[0].geometry.location);      
                   //Añado un listener para cuando el markador se termine de arrastrar      
                   //actualize el formulario con las nuevas coordenadas        
                   google.maps.event.addListener(marker, 'dragend', function(){       
                        updatePosition(marker.getPosition());        
                   });     
               } else {    
                   //si no es OK devuelvo error       
                   alert("No podemos encontrar la direcci&oacute;n, error: " + status);     
               }    
           });  
       }      
       //funcion que simplemente actualiza los campos del formulario    
       function updatePosition(myLatlng) {      
           jQuery('#lat').val(myLatlng.lat());     
           jQuery('#lng').val(myLatlng.lng());  
       } 
        
         function test(){ 
            alert("teclas"); 
          } 
           
         
</script>  
</head> 
 <body onload="initialize()">  

    <? 
        //necesario para poder usar is_page o is_single 
          add_action('template_redirect','carga_archivos');  
         
          function carga_archivos(){   
              if(is_single(9999)) // tu número de post o slug  
              {    
                    wp_enqueue_script( 'google-api','https://maps.google.com/maps/api/js?sensor=true', array( 'jquery' ) );    
                    wp_enqueue_script( 'google-maps',get_bloginfo('stylesheet_directory') . '/js/google-map.js', array( 'google-api' ) );   
              } 
          }             
    ?> 
  
     <form id="position" name="position" action="#">  
        <br /> 
        <label>Direcci&oacute;n</label> 
        <input type="text" id="direccion" name="direccion" value="Miraflores, Lima - Peru"/>  
        <button id="pasar">Pasar al mapa</button>   
        <br /><br /> 
        <!-- div donde se dibuja el mapa--> 
        <div id="map_canvas" style="width:500px;height:400px;"> 
        </div> 
        <br /> 
        <!--campos ocultos donde guardamos los datos--> 
        <input type="text" name="lat" id="lat" onkeypress="javascript:updatePosition();" />  
        <input type="text" name="lng" id="lng" onkeypress="javascript:updatePosition();" />  
    </form>      
 </body> 
 </html>

Test Foro de elhacker.net SMF 2.1

Problema al capturar la coordenada dinamica en Google Maps API v3 ?

Sumerio