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>