Javascript

Introduction à jQuery et Google Maps

Administrateur

Jui 09 |17:52

Mise à jour le Mardi, 09 Juin 2009 18:06

Il existe déjà une multitude de techniques différentes afin d'afficher une carte Google Map dans votre page web. Voyons en une de plus aujourd'hui grâce à l'utilisation de jQuery et des API googles. Voyons donc comment faire interagir les 2 ensembles.

Intégration de l'API Google Maps et de jQuery

Tout d'abord, il vous faudra obtenir votre clé (API KEY) en vous inscrivant sur le site de google ; http://code.google.com/apis/maps/signup.html. Vous aurez besoin de cette dernière à l'étape suivante.

Chargeons ensuite jQuery et l'API dans vos 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.

HTML

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

CSS

<style media="screen" type="text/css">
    #map { width:500px; height:500px; }
</style>

Afin de créer une carte, nous allons créer une nouvelle instant de GMap2. Par la suite nous allons positionner le centre de la carte sur la localisation désiré. 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é à l'étape suivante
    markers[i] = marker;
}

Nous allons maintenant pouvoir utiliser jQuery et Google Maps. Utilisons maintenant 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 clique 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>.

HTML

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

CSS

<style type="text/css" media="screen">
    #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; }
</style>

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

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

Ajoutons des boites de message personalisé à notre carte.

HTML

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

CSS

#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 panneau. 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); permets de convertir une latitude et une longitude d'un marqueur en pixel. Cette dernière retourne donc une position en pixel (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());
}

Envoyer par mail

Vu: 2333

Commentaires (2) Add Comment

Flux RSS pour les commentaires

humm
Par keusta , juillet 13, 2009

Ca à l'air bien mais entre la théorie et la pratique, parfois ça bug.
Une page d'exemple aurait été fort apprécié... (il est jamais trop tard smilies/wink.gif