Cómo usar un mapa en tu sitio

El paso a paso

Vamos con el paso a paso para incluir un mapa del IGN en tu web, pero también podés mirar el código del ejemplo de arriba.

Importante: Si en tu sitio ya usás jQuery (versión mayor a 1.7.2) y Google Maps API (v3), podés empezar desde el paso 2.

1. Incluí en tu página la API de Google Maps y jQuery

Primero, tenés que incluir el script de jQuery y el de Google Maps en la sección <head> de tu página.

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>

2. Incluí argenmap.jquery

argenmap.jquery es una librería para usar online. No hace falta descargarla para que tu mapa ande mejor. De hecho, estamos en constante actualización de versiones y usándola online evitás perder las actualizaciones que hagamos .

<script type="text/javascript" src="https://www.ign.gob.ar/argenmap/argenmap.jquery.min.js"></script>

3. Creá un div en tu página en donde quieras incluir el mapa.

argenmap.jquery necesita un alto definido para el <div>. Así que no te olvides de definir el "height" del div. Podés hacerlo por CSS o por style.

<div id="mapa" style="height:315px;"></div>

4. Convertí el div en un mapa

Recordá esperar hasta que cargue el documento

Al igual que con cualquier plugin de jQuery, tenés que esperar que el div que vas a convertir en mapa ya esté creado antes de convertirlo en un mapa.

Incluyendo estas líneas entre tu HTML, convertís el div con id="mapa" en un mapa del IGN en tu sitio, luego de que el browser haya terminado de cargar la página.

<script type="text/javascript" >
$(document).ready(function(){
$("#mapa").argenmap();
});

/*
o si preferís 

$(function() {
$("#mapa").argenmap();
}); 
*/

</script>

Si querés hacer más cosas sobre el mapa como cambiar el centro del mapa, el zoom o agregar un marcador, consultá la API de argenmap.jquery

Todo junto se ve así

<head>                              
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://www.ign.gob.ar/argenmap/argenmap.jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#mapa").argenmap();
});
</script>
</head>
<body>                              
<div id="mapa" style="height:315px;"></div>                             
</body>