Introduction à jQuery et Google Maps

Date de publication : 22/09/2009

Par Dave Lizotte (PcKULT)
 

Cet article est la traduction de :jQuery and Google Maps Tutorial: #1 Basics.
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 Google. Voyons donc comment faire interagir les 2 ensemble.
2 commentaires Donner une note à l'article (4.5)

               Version PDF (Miroir)   Version hors-ligne (Miroir)

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


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. 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 instant 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é à 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());
}
info Une page de démonstration est à votre disposition ici.


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2009 Dave Lizotte. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum JavaScript

Blogs

Hébergement

 
Partenaires

Hébergement Web