JOURMOLY

Siempre me había parecido interesante Google Maps pero nunca me había metido a revisar que tan sencillo era de implementar en un sitio. Hoy me decidí a mirar un poco su API y me sorprendí de la cantidad de opciones que posee. Está todo bastante bien documentado, con ejemplos claros y bien explicados. A continuación haré un breve resumen de algunas de las cosas que estuve probando.

Comenzando con Google Maps

Para utilizar Google Maps necesitas una KEY que no es mas que un código que deberás utilizar para cada mapa. Este código solo es válido para el dominio o directorio para el cual lo solicitas, por ejemplo: yo lo solicité para www.jourmoly.com.ar por lo cual podré utilizar dicho código para este sitio y todos sus subdirectorios. El código te lo facilitan de manera instantánea, solamente debes ingresar aqui , aceptar los términos y condiciones e indicar el dominio donde lo vas a utilizar. Inmediatamente te aparecerá en pantalla tu código acompañado de un ejemplo de Google Maps al estilo Hola mundo!

Este es el primer ejemplo

Si verificas el código fuente verás que en primera instancia se incluyen las clases de Google Maps, indicando tu KEY como parámetro.

1
2

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=TU_KEY"
      type="text/javascript"></script>

Y luego la inicialización del mapa

1
2
3
4
5
6
7
8
9
10
11
12
13

    <script type="text/javascript">
 
    //< ![CDATA[
 
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
 
    //]]>
    </script>

La inicializacion de nuestro mapa esta dentro de la función load, la cual se llama con el evento onLoad de nuestra pagina de ejemplo. Google Maps no soporta todos los navegadores, por lo cual una de las primeras lineas de nuestra función actúa como filtro para aquellos navegadores no soportados.

1

var map = new GMap2(document.getElementById("map"));

Aqui se crea una instancia de la clase GMap2, pasando por parámetro el elemento en el cual queremos insertar el mapa. En este caso sera en un div con id=”map”. El tamaño del mapa será igual al tamaño de nuestro div, así que si queremos un mapa de 900px x 300px solo debemos ajustar los estilos de “map”.

1

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

El método setCenter como podrán imaginar lo que hace es colocar nuestro mapa en una coordenada específica. En este caso setCenter recibe dos valores, el centro indicado por la clase GLatLng y el zoom (13). A su vez, la clase GLatLng esta recibiendo dos parámetros que son la latitud y la longitud del sitio que visualizamos ni bien se carga nuestra página.

Nuestro primer mapa es un poco pobre y no tiene las herramientas básicas como el zoom, los botones de desplazamiento y demás, ese sera nuestro próximo paso.

Agregando controles a nuestros mapas

Los botones de desplazamiento, el controlador de zoom y el menú para elegir el tipo de mapa son controles que podemos agregar. Para ello vamos a utilizar el método addControl(control) y los controles disponibles son los siguientes:

(haz click sobre los enlaces para ver el control en el mapa)

GLargeMapControl
Botonera de desplazamiento y zoom versión completa.

GSmallMapControl
Botonera de desplazamiento y zoom versión reducida.

GSmallZoomControl
Solo zoom

GScaleControl
Escala

GMapTypeControl
Botonera para elegir el tipo de mapa( Mapa, Satélite o Híbrido)

GOverviewMapControl
Vista en miniatura del mapa.

Para agregar uno de estos controles es tan sencillo como lo muestra el siguiente código:

1
2
3

var map = new GMap2(document.getElementById("map"));
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Y obviamente se puede agregar mas de uno de la vez:

1
2
3
4

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Hasta aquí por ahora. En alguna de las próximas entradas ampliaré sobre el uso de las coordenadas, marcadores y demás herramientas que encuentre interesantes.

Fuente: Este articulo lo escribí luego de leer parte de la documentación de google maps, en inglés.

Popularity: 18% [?]

Otros artículos

• Ejemplos rápidos con Google Maps
• Sistemas de control de versiones
• Efectos con Mootools: Fx.Slide
• Pronto volvere a publicar nuevos artículos
• Clases y objetos con Mootools