Título: Problema al capturar la coordenada dinamica en Google Maps API v3 ?
Publicado por: Sumerio en 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. <!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ó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ó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>
|