Aprendiendo a customizar con el API de Google Maps

Después de ver la genial idea que tuvo la agencia Icolic para el día del niño, utilizando el api de googlemaps para organizar una búsqueda del tesoro por las calles de buenos aires, nos decidimos a investigar un poco el tema.

Como primer paso, claro está, fue hacer la búsqueda del tesoro; paseamos por medio buenos aires con google maps y al terminarla, había que formar con distintas letras una palabra clave que nos permite anotarnos en un concurso (ganaremos?).

El segundo paso, ya fue más técnico; ver cómo lo habían hecho. En este punto, tuvimos una sorpresa que adiciona más genialidad al tema; uno podría pensar que había que programar cada punto con coordenadas geográficas, javascript, etc, más decenas de horas de trabajo para lograr semejante juego, pero no; todo se reduce a ingresar a quikmaps , generar una cuenta y voilá, armar el mapa.

Un poco desorientados de la sencillez, decidimos complicarnos, y aprender un poco a armar un mapa pero utilizando el api de Google Maps.

Acá explicamos lo básico para situar un mapa en un lugar determinado y colocar un mensaje:

1. Lo primero que hay que hacer, es registrarse en googlemaps para que nos den una “key”, la cual usaremos para llamar al script.

Esto iría en el head:

<script src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfd82QscLycPLtY1SGxSSj xRTlqLH0E5xeDbA4FvS2-bw9ky5sxQyplonVdNM9QW-1X_rBpLQZLONQA” type=”text/javascript”></script>

Ahi se ve el parámetro “key” que le pasamos la variable de la key..es larga, sí (copiar y pegar)

2. En el segundo paso, es cuando se empieza a poder hacer cosas locas; poner controles, quitarlos, el zoom, tipo de mapa, marcar, etc.

Verificamos si el browser es compatible:

<script type=”text/javascript”>function load() {if (GBrowserIsCompatible()) {

Seguirá entonces con ver donde “ponemos” el mapa, el div le pusimos mapaIz:

var map = new GMap2(document.getElementById(”mapaIz”));

Y centramos el mapa en las coordenadas dadas:

map.setCenter(new GLatLng(-34.589744, -58.440117), 17);

Y acá tenemos que hacer un alto para explicar un poco más en detalle; en Argentina, aún no hay mapas de calles como en Brasil o USA que permitan escribir una dirección y sacar las coordenadas; en la explicación de Google hablan de una función “geocoder” que convierte una dirección de calle y número en una coordenada. En Argentina, no tienen mapas aún, por lo que tuvimos que recurrir a una solución “casera”; instalamos Google Earth, utilizamos un pointer en el lugar que deseábamos y tomamos las coordenadas geográficas (grados, minutos, segundos); pero para la web, precisamos coordenadas en decimales, por lo que había que pasarlas. Encontramos este sitio que lo hace online (genial, no?).

Pero había un pequeño detalle que nos hizo aparecer en Asia; los negativos y positivos; los hemisferios se ordenan en positivos y negativos. América del sur, tiene latitud negativa y longitud negativa, por eso los signos.

Nos quedó entonces:

New GlatLng (-34.589744, -58.440117),17);

El 17 corresponde al zoom que le quisimos dar, así se ve bien el edificio.

Una vez aplicados estos puntos, proseguimos con el tipo de mapa:

map.setMapType(G_SATELLITE_TYPE);

Ahi elegimos la vista satelital, porque en buenos aires a 17 de zoom en vista mapa no se podría ver nada.

Y seguimos, con la ventana y el texto:

map.openInfoWindow(map.getCenter(),document.createTextNode(”eto e inzearch”));

Y ya…lo que queda al final es llamar al div “mapaIz”

y listo, sale con fritas!

Para más referencias ver Google Maps Api