Autor
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ó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>
En línea
