SummArg | Cursos y recursos para webmasters

12/06/2012

Utilizar mapas de Google Maps en tu web con opciones avanzadas gracias a gMaps

gMaps.js es un plugin para jQuery que nos permite insertar mapas de Google Maps con una amplia variedad de opciones y con muy poco trabajo. Podemos acceder a marcar rutas y marcadores en nuestros mapas, hacer uso de funciones de geolocalización y controles personalizados.

Para utilizarlo bastará con descargar el plugin y, junto a jQuery, linkearlos a nuestro proyecto entre etiquetas <head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../gmaps.js"></script>

Y luego procedemos a insertar nuestro mapa, por ejemplo uno básico, de la siguiente manera:

<script type="text/javascript">
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: -12.043333,
lng: -77.028333,
height: '100px'
});
});
</script>

Y luego colocamos el div con ID #map en cualquier parte entre etiquetas <body>.

<div id="map"></div>

Obtendremos el siguiente resultado.

gMaps.js | Códigos de ejemplo

Dejar un comentario