JavaScript
CSS
HTML
mooTools
PHP
AstucesLe but de cet article est d'expliquer comment intégrer un plan GoogleMap© dans une page web et manipuler le plan, changer dynamiquement le positionnement, le zoom, les marqueurs, ajouter des bulles d'informations, etc...
Intégrer un plan dans une page web est relativement aisé, le code fourni par le site maps.google.fr via le bouton « Lien » permet d'intégrer un iframe contenant le plan positionné comme souhaité.
Manipuler ce plan via JavaScript et l'API de GoogleMap n'est pas plus compliquée pour quelqu'un qui maîtrise un peu le langage de script. La méthode par contre diffère, dans ce cas, on ne passe pas par un iframe mais par un div qui va contenir à terme le plan.
Pour commencer, il faut intégrer l'API à la page web dans la section head de la page :
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
Ensuite, dans la section body de la page, il faut définir le div qui recevra le plan :
<div id="divMap" style="width: 800px; height: 400px;"></div>
Enfin, dans la section head de la page, il faut coder l'implémentation dans le div de l'objet GoogleMap, à déclencher une fois la page entièrement chargée, pour être sûr que le div cible soit bien présent au moment de l'exécution du script. Pour ceci, 2 possibilités, plus simplement pour les utilisateurs de la bibliothèque mooTools dans l'évênement domready de l'objet windows, ou en JS pur, en codant la fonction d'implémentation et en l'appelant dans l'évênement onload du body comme ceci :
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
function initMap() {
var mapLatlng =new google.maps.LatLng(-34.397,150.644);
var mapOptions = { zoom:8, center: latlng, mapTypeId:
google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("divMap"),
mapOptions);
}
</script>
</head>
<bodyonload="initMap()">
Voilà qui est fait, notre div contient le plan GoogleMap et l'utilisateur peut le manipuler.
Une possibilité simple et intéressante si l'on veut mémoriser le plan dans une base de données par exemple, c'est de récupérer les propriétés de l'objet map, tel que les coordonnées de la position, le niveau du zoom ou encore le type d'affichage :
alert("Zoom = " map.getZoom());
alert("Latitude = " map.getCenter().lat());
alert("Longitude = " map.getCenter().lng());
alert("Type d'affichage = " map.getMapTypeId());
Pour ajouter au plan des marqueurs, il faut utiliser l'objet Marker fournit par l'API GoogleMap :
var marker = new google.maps.Marker({
position: map.getCenter(), // Position du marqueur via l'objet LatLng
draggable: true, // Marqueur déplaçable par l'utilisateur
map: map, // Objet map recevant le marqueur
title: "Mon marqueur"
});
On peut ajouter autant de marqueurs que l'on souhaite sur le plan, on peut aussi utiliser sa propre ressource graphique pour le marqueur (propriétés "icon" et "shadow" de l'objet Marker.
On peut aussi tout simplement coder des évênements au sein du plan, en utilisant la méthode addListener de cette manière :
google.maps.event.addListener(map, 'click', function(event) {
marker.setPosition(event.latLng);
});
Dans l'exemple ci-dessus, on code l'évenement click rattaché à l'objet map (click sur la map) et on demande au marker de se positionner à la latitude / longitude correspondant à la position de la souris, via l'objet event.
Dernier point développé dans cet article, l'ajout d'une fenêtre d'information. L'API met à disposition un objet InfoWindow qui permet l'affichage de bulles d'information sur le plan. Nous allons instancier cet objet avec un texte de notre choix, et l'afficher lorsque l'utilisateur clique sur le marqueur créé précédemment :
var infowindow =new google.maps.InfoWindow({
content: "Texte de mon choix"
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
Voilà donc notre bulle d'information apparaîtra lorsque l'utilisateur cliquera sur le marqueur. Le contenu de la fenêtre d'information est dans notre exemple simplifiée à l'extrême, mais l'objet permet la spécification via des id d'éléments de présentation comme un titre, une icône...
Pour conclure, on peut dire que l'objet fourni par l'API GoogleMap est très simple d'utilisation tout en étant extrêmement permissif au niveau des fonctionnalités.
Pour aller plus loin : Tutoriaux & documentation GoogleMap
Intégrer des polices de caractère personnalisées
ComboBox pour envoi de fichiers
ComboxBox de choix d'images
Quelques bons scripts MooTools
Glissière pour choix d'une valeur numérique
02/05/2011
