• Taller Argenmap 2013 /
• Integración con mapas de Google preexistentes

Integración con mapas de Google preexistentes

En la versión v1 de argenmap.jquery, suceden varias cosas cuando inicializamos el mapa:

• Se generan los elementos HTML necesarios para ubicar el mapa

• Internamente, se genera un objeto google.maps.Map con la API de Google Maps y se almacena, a través de jQuery.data(), en $(SELECTOR).data('argenmap').gmap. (Esto cambia en la versión v2 de argenmap.jquery ya que no usa la base programática de Google Maps)

• Se configuran las opciones por defecto (zoom, centro, capas base, proyección)

Si quisiéramos acceder a la instancia del mapa puede hacerse declarando una variable y asignarla de esta manera:

<script type="text/javascript">
  $("#mapa").argenmap();
  var map = $('#mapa').data('argenmap').gmap;
</script>

En definitiva, argenmap.jquery almacena un objeto google.maps.Map a través de jQuery.data() en $(SELECTOR).data('argenmap').gmap y este objeto es el que importa si necesitás migrar una app basada en Google Maps a un mapa con datos oficiales de Argentina.

Gracias a esta funcionalidad, los sitios que usan actualmente un mapa de Google, pueden reemplazar rápidamente ese mapa por uno de argenmap.jquery.

5.1 Ejemplo funcional

Imaginemos este ejemplo:

<script>
//objeto InfoWindow vacio
var informacion = new google.maps.InfoWindow();
//coordenadas del Aconcagua
var aconcagua = new google.maps.LatLng(-32.64799150996908, -70.05207443237303);
//coordenadas para el centro del mapa
var centro = new google.maps.LatLng(-32.64799150996908, -69.913028717041);
//opciones de inicialización para mapa de google
var opciones = {
	zoom: 12,
	center: centro
};
//instancia del mapa de google maps
var map = new google.maps.Map(document.getElementById('mapa'),opciones);
//configuración del InfoWindow
informacion.setContent('Este es el contenido del InfoWindow');
informacion.setPosition(aconcagua);
//mostrar InfoWindow
informacion.open(map);
</script>

Para reemplazar rápidamente el mapa de Google por uno de Argenmap buscamos dónde se instancia el mapa:

...
//instancia del mapa de google maps
var map = new google.maps.Map(document.getElementById('mapa'),opciones);
...

Podemos ver como el mapa se almacena en una variable map y luego se utiliza para configurar y abrir un InfoWindow. Ahora lo único que tenemos que hacer es, en lugar de crear un mapa de Google, crear un mapa con Argenmap y luego asignar esa misma variable (map) al mapa que crea internamente Argenmap.

...
//creamos el mapa con las mismas opciones que antes, pero en una sola línea ;)
$('#mapa').argenmap().centro(-32.64799150996908, -69.913028717041).zoom(12);
//y asignamos la variable 'map' al mapa interno de argenmap
var map = $('#mapa').data('argenmap').gmap;
...

Listo, nuestro mapa ahora se instancia con Argenmap y podemos visualizarlo con los datos oficiales de la República Argentina

5.2 Ejercicio

• Hacé click en Javascript

• Comentá la línea que empieza con var map = new google.maps...

• Des-comentá las líneas que empiezan con $('#mapa').argenmap... y var map = $('#mapa').data...

• Mirá los resultados en el panel de la derecha

JS Bin

El código de cada sitio usando un mapa de Google puede ser distinto, pero siempre hará referencia al objeto mapa de alguna forma y este puede ser extraído de la instancia interna de mapa de Argenmap, haciendo que reemplazar uno por otro sea extremadamente simple.

Recordá que tenés más ejemplos para consultar en la documentación de Argenmap