Tutorial

Tutorial

Argenmap v1 desde CDN

jQuery http://code.jquery.com/jquery-1.8.2.js
Argenmap v1 http://www.ign.gob.ar/argenmap/argenmap.jquery.min.js
Google Maps API http://maps.google.com/maps/api/js?sensor=false


Cómo incoporar Argenmap v1 en una página web

Argenmap v1 es una librería escrita en JavaScript que funciona incluyendo el código en un sitio web. A continuación se describe el procedimiento para incorporar Argenmap v1 en una página web.

1. Incluir la API de Google Maps y jQuery en una página web

Incorpar el script de jQuery y Google Maps en la sección head de la página web.

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

2. Incorporar Argenmap v1

Argenmap v1 es una librería online, y por lo tanto, no es necesario descargarla.

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

3. Crear un contenedor (div) en la página web en donde se desee incluir el mapa

Argenmap v1 necesita que se establezca un alto específico para el div. Esto es posible realizarlo con CSS o bien definiendo el estilo con el atributo style de la etiqueta que se utilice.

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

4. Convertir el contenedor (div) en un mapa

Es necesario que el div haya sido creado antes de convertirlo en un mapa. A partir del código que se observa a continuación, se puede convirtir el div con id="mapa" en un mapa de Argenmap v1.

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

o

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

Para cambiar el centro del mapa, modificar el nivel del zoom, agregar un marcador, etc. por favor consultar el manual de operación de Argenmap.

5. El código final debiera verse de la siguiente forma

<head>                              
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="http://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>