Localizar direcciones con Google Maps
Desde los inicios de los callejeros en internet siempre me llamó la atención la posibilidad de realizar alguno, incluso hice mis pinitos allá por el 2000 cuando desarrollaba lo que podría ser un Google Local primitivo. Eran esfuerzos titánicos que a la larga no funcionaban. Sin embargo hoy en día tener nuestro propio callejero de casi todo el mundo (sobre todo Norteamérica, Europa y Japón) es tarea sencilla con Google Maps.
Vamos a ver cómo podemos hacer esto:
Google Maps dispone del objeto: GClientGeocoder con el cual podemos localizar direcciones.
Aquí tenemos un ejemplo práctico:
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<title>Google Maps API Example: Simple Geocoding</title>
<script src=”http://maps.google.com/maps?file=api&v=2.x&key=miapikey” type=”text/javascript”></script>
<script type=”text/javascript”>
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(”map_canvas”));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + ” not found”);
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<form action=”#” onsubmit=”showAddress(this.address.value); return false”>
<p>
<input type=”text” size=”60″ name=”address” value=”1600 Amphitheatre Pky, Mountain View, CA” />
<input type=”submit” value=”Go!” />
</p>
<div id=”map_canvas” style=”width: 500px; height: 300px”></div>
</form>
</body>
</html>
Si nos fijamos en el código vemos como en la función initialize(), si el navegador es compatible con Google Maps, creamos un mapa simple y justo debajo está el objeto “geocoder” que es el que nos va a mostrar las coordenadas de las direcciones.
Un poco más abajo vemos la función showAddress(address) a la cual le vamos a introducir la dirección que buscamos mediante la variable “address”. Esta función ella solita si el objeto geocoder conoce la dirección nos va ha poner el centro del mapa en la dirección correcta, va a poner una marca y un “bocadillo” de información. Si no conoce la dirección nos mostrará una alerta.
Veamos este objeto en funcionamiento:
