04Jul 2012 28 Comments */?>

Como usar Google maps geocoder API v3

Categorías: PHP, Tutoriales, Wordpress - Tags: ,

En estos días tuve que realizar para un cliente un metabox donde pasaba una dirección real, a coordenadas, con el API v3 de Google Maps Geocoder y creaba un marker en el map, el cual se puede desplazar manualmente para marcar la dirección mas precisamente.

Esto sirve para cualquier proyecto donde se quiera incluir la localización en un mapa de google. Tan solo se deben guardar las coordenadas obtenidas en una base de datos y luego dibujar un mapa con ellas.

Hoy les voy a mostrar una pequeña introducción de como debería funcionar sobre WordPress.

Nuestro objetivo es crear lo siguiente:






 
Lo primero que necesitamos es un pequeño formulario que contiene el div donde se dibuja el mapa y el campo donde ingresamos la dirección

<form id="google" name="google" action="#">

<label>Direcci&oacute;n</label>
<input type="text" id="direccion" name="direccion" value="Luro 1200, Mar del Plata, Buenos Aires, Argentina"/> 
<button id="pasar">Pasar al mapa</button>

<!-- div donde se dibuja el mapa-->
<div id="map_canvas" style="width:450px;height:300px;"></div>

<!--campos ocultos donde guardamos los datos-->
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="lng" id="long"/>
</form>

Lo segundo que necesitamos es crear un archivo javascript, en este caso lo llamamos google-map.js

//Declaramos las variables que vamos a user
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('#long').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 latLng = new google.maps.LatLng(lat,lng);
      }
      else
      {
      	//Si no creamos el objeto con una latitud cualquiera como la de Mar del Plata, Argentina por ej
      	 var latLng = new google.maps.LatLng(37.0625,-95.677068);
      }
      //Definimos algunas opciones del mapa a crear
       var myOptions = {
          center: latLng,//centro del mapa
          zoom: 15,//zoom del mapa
          mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa, carretera, híbrido,etc
        };
        //creamos el mapa con las opciones anteriores y le pasamos el elemento div
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        //creamos el marcador en el mapa
        marker = new google.maps.Marker({
            map: map,//el mapa creado en el paso anterior
            position: latLng,//objeto con latitud y longitud
            draggable: true //que el marcador se pueda arrastrar
        });
       
       //función que actualiza los input del formulario con las nuevas latitudes
       //Estos campos suelen ser hidden
        updatePosition(latLng);
        
        
    }
    
    //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(latLng)
  {
  	  
  	   jQuery('#lat').val(latLng.lat());
       jQuery('#long').val(latLng.lng());
  
  }

Y por último pero no por ello menos importante cargamos los archivos javascript necesarios. OJO!!! solo los cargamos en la página o post que necesitemos, para no cargar la web de scripts que no vamos a utilizar.
Para ello en functions.php hacemos lo siguiente:

//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','http://maps.googleapis.com/maps/api/js?key=TU CLAVEAPI&sensor=true', array( 'jquery' ) );
		wp_enqueue_script( 'google-maps',get_bloginfo('stylesheet_directory') . '/js/google-map.js', array( 'google-api' ) );
	}
}

Para obtener el API de google maps deben ir a https://code.google.com/apis/console/, activar dentro de Services el servicio de mapas, y copiar el api del menu API Access

Espero que les haya gustado este tutorial. Saludos!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Estudioweb2008

    Hola, gracias por el code! ahora voy a intenterlo! Luego te cuento como me fue!

  • David Hernández

    Hola 

    Estoy usando tu código y en principio me ha funcionado la primera vez. Donde me pierdo un poco es en la última parte.

    He accedido a Google apis, pero no encuentro dentro de Service el servicio de mapas que comentas. Supongo que te refieres a “Google Maps API v3”. Si esto es así, luego no veo como obtener el js para incluir en el project.

    Salu2

    • masquewordpress

      Tan solo tienes que agregar la url y agregar tu clve api, no necesitas ningun js , el otro archivo es el que creas tu ^^fijate el código de arriba

      • Carvaec

        hola, tengo una consulta

        Cual seria el código completo?

        osea, el documento completo como quedaría al final?

  • Vero00809_chinita

    oye y dime cmo podra ahi mismo poner un boton q me permita eniar  por correo este

  • Carvaec

    hola, tengo una consulta
    Cual seria el código completo?
    osea, el documento completo como quedaría al final?

  • Jsebas85

    Hola. Gracias por el tutorial. Sin embargo, no me queda claro; trabajas en esto como si fuera un plugin? En qué carpeta dejas el archivo .php que incluye el form inicial? Yo tengo una instalación Multisite y estoy intentando mostrar un mapa con latitudes y longitudes almacenados en mi base de datos, me funciona perfecto en php normal, pero tengo problemas con la integración en WordPressm por eso intenté seguir tu tutorial pero me perdí un poco.

  • Rtblanco35

    Hola amigo, como quedaría con la base de datos MySQL?, como guardo las direcciones dinamicamente y luego mostrar el mapa?, te agradecería que me hecharás la mano.

  • MakubeX

    Si tú pones Donoso, Colón, Panamá te lleva a ecuador quito, esta malo el geocoder de google, se supone que si tu ya pusiste panamá debería de limitarte a panamá y no salirte para ecuador.

  • Mark

    PITO DE MONO PERFECTO LO QUE BUSCABA!!! TANKS MEN!!! 

  • Ing Ortiz

    Saludos podrías hacer un tutorial y si es un vídeo mejor y mucho mas rápido de como configurar tu cuenta gmail  para activar los servicios por que son muchos.

    gracias de antemano.

  • franciscoandrspinznsantoyo

    Hombre era precisamente el palillo que me hacia falta para terminar de armar la casita de palitos, Gracias.

  • Monchito007

    Muy buen ejemplo.

    Gracias!

  • Excelente tutorial, excelente explicación Te agradezco mucho!!! me salvaste en serio, muchas gracias!

  • Juanma

    Una Consulta no me dibuja el mapa que puede ser?

  • Marcos

    Hola Damián.

    Una cosa, sabes como se tendría que montar para ofrecerlo desde una web normal y no desde wordpress??

  • Alberto

    si podrías poner el código para descargar bro, me ayudarías un mundo.

  • Pingback: Google Maps api v3 – Obtener coordenadas geograficas | Da Webmasters()

  • Andres Pastor

    Saludos Damián, buen trabajo…! esta info la estaba buscando tratare de adaptarla a una web que trabaja con mysql.. sin embargo si tienes el codigo para una web asi y me lo puedes enviar me ayudarias un mundo… de igual manera graciassssss…

  • Jorge Gaona

    Hola Damián:
    ¿cómo podría insertar más campos en el formulario y que estos atos se envien a un email?
    Me explico:
    Quisiera que se pudieran localizar coordenadas en el mapa y que se pudieran añadir campos con nombre, teléfono, etc… y se enviasen tanto las coordenadas obtenidas como el resto de datos rellenados a un correo concreto.
    Gracias

  • juan carlos rojas

    Gracias por el codigo, me tarde en comprender y ponerlo en practica correctamente, pero funciono al final. Muchisimas gracias

  • Freeman Sao

    Que tal podrias ayudarme a crear este ejemplo, no logro correrlo al 100%.

    1.- pides crear un el formulario seria un archivo index.html, con el archivo de formulario.
    2.- crear un archivo con el nombre google-map y extensión .js = google-map.js , con el contenido que específicas .
    3.- he aqui donde no entiendo bien pides que creemos otro archivo con nombre y extension functions.php, con el contenido que específicas o me equivoco.
    4.-con el key del api de google no tengo problema , ya tengo la liga.

    podrias explicarme mas a detalle por favor, saludos. excelente dia.

  • Damián puedes ayudarnos a guardar las direcciones en una DB?, muchas gracias por tu ayuda

  • alejandro morales

    HOLA AMIGO ME PODRAS AYUDAR ES MI PRIMERA VEZ Y AUN NO ENTIENDO ANDO BUSCANDO UN LOCALIZADOR DE CALLES ALGO EFICIENTE COMO LO TIENES AMIGO?

  • Alexander Oliva

    Muchas Gracias por compartir este conocimiento, me ayudo mucho!

    • PEDRO LEON

      amigo sabes que codigo va en functions.php lo que pasa es que no se que se ponga en el add_action y que numero lleva en el NUMERO De post en el if? por favor

  • PEDRO LEON

    cual es el numero de POST en el ultimo archivo de function.php y en add_action me dice que esta indefinido, me podrían ayudar que va ahí? por favor

    • PEDRO LEON

      YA LO RESOLVI