Introduction à jQuery et Google Maps

Tout d'abord, il vous faudra obtenir votre clé (API KEY) en vous inscrivant sur le site de Google. Vous aurez besoin de cette dernière à l'étape suivante.

Chargeons ensuite jQuery et l'API dans nos pages :

<script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE_API">
<script type="text/javascript" charset="utf-8">
    google.load("maps", "2.x");
    google.load("jquery", "1.3.1");
</script>

Remplacer « VOTRE_CLE_API » par la clé que vous avez obtenue. En utilisant la librairie Google AJAX Libraries API, vous êtes en mesure de charger les librairies JavaScript dont vous avez besoin directement des serveurs Google.

Afin de créer une carte de base, nous avons besoin d'un conteneur <div> et d'un peu de CSS afin d'affecter une taille à la carte.

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

#map {
    width:500px;
    height:500px;
}

Afin de créer une carte, nous allons créer une nouvelle instance de GMap2. Par la suite nous allons positionner le centre de la carte sur la localisation désirée. Nous avons imbriqué le code à l'intérieur de la fonction $(document).ready de jQuery afin d'exécuter ce code une fois la page chargée.

$(document).ready(function(){
    var map = new GMap2(document.getElementById('map'));
    // Centrer la carte sur la Latitude et Longitude (X,Y)
    var MapCenter = new GLatLng(44.797916,-93.278046);
    // Positionnement de la carte et niveau du Zoom
    map.setCenter(MapCenter, 8);
});

Insérons maintenant quelques points sur notre carte simple.

// Insertion de 10 points aléatoire
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var markers = [];
for (var i = 0; i < 10; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
    marker = new GMarker(point);
    map.addOverlay(marker);
    // Tableau des marqueurs qui seront utilisés à l'étape suivante
    markers[i] = marker;
}

Nous allons maintenant pouvoir utiliser jQuery et Google Maps. Utilisons le tableau des marqueurs afin d'ajouter de l'interaction avec jQuery.

$(markers).each(function(i,marker){
    GEvent.addListener(marker, "click", function(){
        map.panTo(marker.getLatLng());
    });
});

Dans la boucle, nous allons utiliser l'espace de nom GEvent afin d'attacher un événement sur le clic de chaque marqueur. La fonction panTo() permet de centrer la carte sur le marqueur cliqué.

Insérons maintenant une liste des marqueurs cliquables à droite de notre carte à l'aide d'une liste <ul>.

<ul id="list"></ul>

#map {
    float:left;
    width:500px;
    height:500px;
}
#list {
    float:left;
    width:200px;
    background:#eee;
    list-style:none;
    padding:0;
}
#list li {
    padding:10px;
}
#list li:hover {
    background:#555;
    color:#fff;
    cursor:pointer;
    cursor:hand;
}

Revenons à notre boucle et ajoutons une étape à notre fonction afin que cette dernière ajoute un lien cliquable dans notre liste <ul>.

$("<li>").html("Point "+i).click(function(){ map.panTo(marker.getLatLng()); }).appendTo("#list");

Ajoutons des boîtes de message personnalisées à notre carte.

<div id="message" style="display:none;">
    Test text.
</div>

#message {
    position:absolute;
    padding:10px;
    background:#555;
    color:#fff;
    width:75px;
}

Nous devons maintenant placer le bloc <div> à l'intérieur de la carte. Pour ce faire, nous allons utiliser jQuery afin d'ajouter le tout à un objet. La visualisation de la carte est séparée en panneaux. Chaque panneau est un bloc <div> une par-dessus l'autre. Il suffit de récupérer le panneau où l'on désire ajouter notre bloc <div> à l'aide de la méthode map.getPane(PANE). Dans le cas actuel, G_MAP_FLOAT_SHADOW_PANE est le panneau que nous allons utiliser pour attacher les messages personnalisés.

$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

Afin d'afficher le message à l'endroit désiré, nous devons séparer l'action du clic en une fonction séparée. Pour ce faire, remplacer map.panTo(marker.getLatLng()); avec displayPoint(marker,i); qui appellera la fonction ci-dessous :

function displayPoint(marker, i){
    map.panTo(marker.getPoint());
    var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
    $("#message").show().css({ top:markerOffset.y, left:markerOffset.x });
}

C'est ici que la magie s'installe ! map.fromLatLngToDivPixel(GLatLng); permet de convertir une latitude et une longitude d'un marqueur en pixels. Cette dernière retourne donc une position en pixels (x,y) en fonction de la gauche et du haut de la carte. Afin de terminer en beauté, ajoutons donc un peu de visuels à tout ceci. Nous allons donc ajouter un événement suite au défilement de la carte. Lorsque cette dernière arrête de défiler, nous allons ajouter un peu de « fadeIn ».

function displayPoint(marker, index){
    $("#message").hide();
    var moveEnd = GEvent.addListener(map, "moveend", function(){
        var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
        $("#message")
            .fadeIn()
            .css({ top:markerOffset.y, left:markerOffset.x });
        GEvent.removeListener(moveEnd);
    });
    map.panTo(marker.getLatLng());
}