Para un proyecto personal sobre restaurantes vegetarianos, Comando Lechuga necesitábamos un localizador de publicaciones y, posteriormente, un mapa que nos localizase todas las publicaciones que previamente habíamos escrito.

Decidí usar el plugin Pronamic Google Maps y me encontré con la necesidad de buscar en el mapa, ya que veía necesario que un usuario tuviese la posibilidad de buscar los restaurantes de su municipio fácilmente.

Para ello realicé un par de modificaciones en dos archivos del plugin, de los que hablo ahora.

Cambio en el archivo classes/Pronamic_Google_Maps_Mashup.php


Después de la línea actual en el archivo…


$content .= sprintf('', esc_attr(json_encode($options)));

podríamos añadir...


$content .= '
';

Simplemente añadimos un div con una caja de texto y un botón que al pulsarlo llamará al javascript que mostramos ahora.

Cambio en el archivo js/site.js


Podemos introducir estas líneas dentro de la función buildMashup. Con el selector jquery tomamos el botón al lado de la caja de texto y llamamos a la clase geocode de Google Maps, que nos geolocaliza, nos devuelve las coordenadas de Longitud y Latitud en función de la cadena de texto que le pasamos como parámetro. En este caso el valor de #map-text. Posteriormente le damos un zoom razonable y centramos el mapa en la posición deseada.


jQuery("#map-button").click(function(){
				geocoder = new google.maps.Geocoder();
				geocoder.geocode( { 'address': jQuery("#map-text").val()}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						map.setCenter(results[0].geometry.location);
						map.setZoom(13);
					}
					else
					{
						alert("Geocode was not successful for the following reason: " + status);
					}
				});
			});

Bastante fácil ¿no? :-)