Introducir un mapa de Google Maps en nuestra página web puede resultar una tarea sencilla si conocemos previamente la dirección pero puede resultar complejo si queremos que los usuarios introduzca su dirección o si queremos detectar automaticamente la dirección. Para ello tenemos un plugin que facilita estas funciones en jQuery: gMap for V3 Google Maps API. Este plugin te permite:

La utilización del plugin es sencillo. Solo necesitamos añadir el siguiente código:


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="RUTA/jquery.gmap.min.js"></script>

Ahora solo necesitas indicarle al plugin como quieres mostrar el mapa y las diferentes opciones. Por ejemplo:


$('#map').gMap({
        latitude: 43.653561,
        longitude: -0.567296,
        zoom: 18,
        markers: [{latitude: 43.653561, longitude: -0.567296}]
});

En este caso #map es el id del contenedor donde queremos introducir el mapa, latitude y longitude indican la latitud y longitud donde se centrará el mapa y zoom es evidente. A través de markers indicamos donde queremos que estén situados los marcadores. El plugin permite numerosas opciones. Algunas muy interesantes son:

Puedes encontrarlas todas en la documentación oficial.

Aviso: hay un error muy común a la hora de no visualizar bien el mapa y es que debemos de asignarle un tamaño al contenedor donde está situado el mapa, puesto que si no tiene un tamañao antes de poner el mapa este no aparecerá correctamente.

###Ejemplos


$('#map').gMap({
        latitude: 37.196937,
        longitude: -3.624265,
        zoom: 18,
        markers: [{latitude: 37.196937, longitude: -3.624265}]
});



$('#map').gMap({});

Tags