gMap facilite l'intégration de Google Maps, sur son site, à l'aide de ce plugin jQuery.

gMap permet facilement d'intégrer Google Maps, à l'aide de ce plugin jQuery, léger ne pésant que 2KB, et facilement paramétrable.

Pour la gestion des points d'intérêts, l'auteur a pris le parti de seulement prendre en charge, la gestion des coordonnées (longitude/latitude), mais n'exclut pas d'intégrer la prise en charge des adresses, dans une prochaine version. Pour trouver facilement, les correspondances adresses <> coordonnées, vous pouvez utiliser des services web, comme GeoNames.

Vous devrez vous enregistrer sur le site de Google, pour utiliser l'API de Google Maps.

gMap : Intégration

gMap requiert, au minimum, la version 1.3 de jQuery, pour fonctionner.

On commence pour insérer les librairies javascripts nécessaires, et remplacer API_KEY par la clé fournie par Google :

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY"></script>
<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.gmap-1.0.0.min.js"></script>

La partie HTML se résume juste à définir une DIV, dans sa page, en n'oubliant pas de lui assigner une largeur et hauteur fixe.

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

Pour créer une map, il suffit juste d'appeler la méthode gMap() :

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

gMap : options disponibles

• Définition du centrage intiale de la carte ( longitude / latitude )
• Zoom initial
• Ajout de POI (coordonnées, texte, popup)
• Personnalisation des icônes
• activation / désactivation des contrôles
• …

Site officiel