Como usar Google maps geocoder API v3

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

Acerca del autor

by 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.

Más Posts de Damián Logghe - Web

Sigueme: