Foros del Web - Ver Mensaje Individual - Problema al capturar la coordenada dinamica en Google Maps API v3 ?

Sumerio · #1 (**permalink**) 21/07/2012, 21:57

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:

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