Hace algunas semanas atrás, mientras terminaba la página de mi empresa (después de un bueeeen tiempo), se me ocurrió agregarle a la sección de contacto, un mapa con la ubicación exacta de mi oficina.
Por lo que el objetivo fue integrar el mapa de GoogleMaps a mi página. Como recientemente GoogleMaps había publicado la actualización de la API a la versión 2, sabía que había muchos cambios… y muchos ejemplos disponibles por ahí no siempre funcionaban bien.
Así es que, manos a la obra, comencé, pero para comenzar, primero hay que solicitar una API Key para el dominio donde vas a integrar los mapas (es decir, si querés usar los mapas en www.minombre.com, tenés que pedir una Key para ese dominio). Todo eso se hace aquí: http://www.google.com/apis/maps/signup.html
Una vez que tenés tu API Key, comienza lo más divertido: integrar el mapa a tu página.
Para comenzar, instanciamos un nuevo objeto de la clase GMap2 (que es la clase central), pero antes, nos aseguramos de que el navegador es compatible, lo hacemos así:
// nuestro código va a ir aquí
}
luego, como dije anteriormente, instanciamos un nuevo objeto de la clase GMap2:
lo “raro” en la sentencia anterior, es el segundo valor que se le pasa al objeto, básicamente, le decimos que cree un nuevo mapa pero sólo en “modo” satélite, es decir, que sólo muestre imágenes satelitales y no mapas (que no están disponibles para Paraguay al nivel de detalle que quería).
Luego agregamos el control GSmallMap al objeto:
el GSmallMapControl te permite “controlar” el mapa agregándole los botones de dirección (arriba, izquierda, etc.) y de zoom (más, menos).
En este punto, otro control que podrías agregar es el GMapTypeControl si instanciaste el GMap2 por defecto (que viene con los tipos de mapas: Mapa, Satélite e Híbrido), que te coloca los 3 botones en la esquina superior y te permite seleccionar el que más te gusta.
Ahora, creamos un “punto”, creando un nuevo objeto GLatLang pasandole las coordenas de latitud y longitud (que en este caso van en negativo):
Una vez que tenemos la variable, “centramos” el mapa sobre ese punto y establecemos el nivel de zoom (según mis pruebas 18 es un nivel aceptable, un valor mayor no siempre muestra las imágenes):
Hasta aquí ya tenemos nuestro mapa integrado a nuestra página y centrada sobre un punto. Ahora, yo quería agregar un marcador sobre el mapa para que el visitante puede saber exactamente dónde quedaba mi oficina. Siguiente paso: agregar un marcador.
Creamos un nuevo marcador instanciando un nuevo objeto de la clase GMarker y le pasamos el punto creado anteriormente (ya que esa es la ubicación exacta de mi oficina):
Ya tenemos el marcador, ahora lo agregamos al mapa así:
Ahora ya aparece el mapa junto con una hermosa marca roja sobre el mapa mostrando exactamente la ubicación de mi oficina.
No estoy conforme, quiero algo más. Quiero que al hacer click muestre una ventanita con la dirección exacta (para los visitantes que cayeron directamente en esa página):
Avda. San Roque González casi Avda. San Blás
Edificio Hashimoto, Departamento 99
Encarnación, Paraguay.”;
GEvent.addListener(marker, “click”, function() { marker.openInfoWindowHtml(html); });
Ahora sólo resta incluír el div correspondiente:
en la parte de la página donde quiero que aparezca y ya está.
Con eso, ya está nuestro mapa, centrado, con un marcador y hasta un ventana de información. Ahora el problema es que no muestra nada.
Aunque no me funcionó a la primera vez, una rápida petición de auxilio al mailing-list del Google Maps API me saca del apuro: mover todo el javascript justo arriba de la etiqueta body, ya que el browser estaba ejecutando el javascript primero antes de ejecutar la etiqueta div (por lo que al momento de ejecutarse, no existía ningun div y por lo tanto, no se podía mostrar nada) (Gracias Mike Williams por el tip!). Me imagino que esto tiene una solución por lo que seguiré buscando…
Por de pronto, mi nuevo y reluciente mapa ya se puede ver aquí.
Por último, el código Javascript:
//< ![CDATA[
// nos aseguramos que el browser sea compatible
if (GBrowserIsCompatible()) {
// creamos un nuevo objeto GMap2 pero únicamente con la vista satelital
var map = new GMap2(document.getElementById(“map”), {mapTypes:[G_SATELLITE_MAP]});
// creamos el control de SmallMapControl
map.addControl(new GSmallMapControl());
// nuestro punto de interés =)
var point = new GLatLng(-27.355755, -55.855426);
// Centramos el mapa en las coordendas dadas y a la altura de 18
map.setCenter(point, 18);
// Finalmente, creamos un marcador sobre el mapa
var marker = new GMarker(point);
// agregamos el marcador al mapa
map.addOverlay(marker);
// creamos un texto para el info del marcador
var html = “<b>Nexus Information Technologies
Avda. San Roque González casi Avda. San Blás
Edificio Hashimoto, Departamento 99
Encarnación, Paraguay.”;
// y finalmente registramos en el evento click del marcador
// que se llame al evento openInfoWindowHtml y que muestre el texto anterior
GEvent.addListener(marker, “click”, function() { marker.openInfoWindowHtml(html); });
// eso es todo, funciona!
}
// –></script>
La cantidad de cosas que se puede hacer con esta API es increíble, invertir un poco de tiempo en leer la Documentación y la Referencia de la API vale completamente.
