jueves, 26 de febrero de 2015

Javascript para el manejo simple de google maps

Estuve trabajando un poco con google maps en javascript y se me ocurrió hacer un script para trabajar más fácilmente con ello. Aprendí cómo programar en javascript orientado a objetos y lo poco cooperativo que es con google maps pero al final terminé con una clase que maneja los mapas de una forma bastante cómoda.

Quise que fuera simple y que me permitiera mezclar el código que yo quisiera, principalmente quería que la parte de crear el mapa y cosas comunes como agregar marcadores y crear un menú contextual fueran más fáciles.


Para usarlo hay que agregar 3 scripts: gMaps.js, jQuery y el api de google maps. Además hay que agregar el css gMaps_style.css:
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="gMaps/gMap.js"></script>

        <link rel="stylesheet" type="text/css" href="gMaps/gMap_style.css">

Aquí un ejemplo del uso:
Para usarlo primero hay que crear una instancia del mapa:

var mMap = new gMap();

Para agregar marcadores, hay que usar la función addMarker que lleva los parámetros: nombre, latitud, longitud e info:

mMap.addMarker('Nombre', 0, 0, 'Informacion');

La info es el html que va a aparecer cuando se haga click en el markador, se puede ignorar o pasar un string vacío para que no haya info

Para crear un menú contextual primero hay que crear sus items, la función addMenuItem toma el HTML del item y el javascript que se correrá al crearse el menú (opcional). Esto último sirve para agregar un código que se corra al hacer click en el item del menú.

mMap.addMenuItem(itemHTML, itemJavascript);

Dentro del HTML de estos items, si se ingresa :lat: o :lng:, serán cambiados por los valores de latitud y longitud del lugar del mapa donde se hizo click derecho (yo personalmente lo uso para ponerlo en un form y mandarlo usando ajax).
Finalmente se usa la función createContextMenu para crear el menú con los items que se agregaron.

mMap.createContextMenu();

Para terminar se debe crear el mapa usando la función createMap pasándole la id del contenedor, las coordenadas de dónde se debe centrar el mapa y el nivel de zoom.

mMap.createMap("map_canvas", 0, 0, 14);

Tiene que ir al final, sino no se agregarán los marcadores ni el menú contextual.

Para que todo funcione bien, el código debe correrse después de cargarse el html, lo cual ya está programado en la clase gMap. Para agregar código después de la creación del mapa, se usa  la función queue, que pueden usar si quieren para agregar más código al final. Tienen que pasarle una función que lleva un parámetro que es la referencia a la clase.

mMap.queue(function(aRef){});

Si quieren usar variables o funciones de la clase gMap, usan aRef, por ejemplo, si quieren acceder al mapa, usan aRef.mMap.

Por cualquier duda, pueden dejar un comentario. Espero facilitarle un poco la vida a alguien con esto.
Related Posts Plugin for WordPress, Blogger...