3. Introduction sur les marqueurs et première utilisation d'un événement#
Date de publication initiale : 22 août 2008
L'API Google Maps v2 est dépréciée depuis le 19 mai 2010.
Introduction#
Les deux premiers tutoriaux - 1 et 2 - nous ont permis d'afficher une carte Google Maps sur une page Web.
Ce tutoriel explique comment ajouter un marqueur sur la carte et comment ouvrir une infobulle lors d'un clic sur ce marqueur.
Initialisation#
Pour ce tutoriel, nous partirons de la carte définie dans le second tutoriel et alimenterons la fonction initialize().
Création du marqueur#
Un marqueur se crée de la manière suivante en utilisant la classe GMarker de l'API.
Le première ligne est la création du marqueur.
La seconde ajoute le marqueur sur la carte.
var marker1 = new GMarker(new GLatLng(43.57726664771851, 1.402251992034912));
map.addOverlay(marker1);
Gestion de l'événement 'click' sur le marqueur#
La classe GEvent permet de gérer de nombreux événements sur la carte et tous ses éléments contenus. Il suffit juste de définir un événement lors d'un clic sur le marqueur précédemment défini :
Ici un 'clic' sur le marqueur ouvrira une infobulle contenant du HTML :
Code complet#
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
[Google Maps] 3. Introduction sur les marqueurs et première utilisation d'un événement
</title>
<style type="text/css">
html { overflow:hidden; height:100%; }
body { height:100%; margin:0; }
#map { width:100%; height:100%; }
</style>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=votre_clé_ici" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(43.57769664771851, 1.402821992034912),16);
map.addControl(new GMapTypeControl());
map.removeMapType(G_HYBRID_MAP);
map.addMapType(G_PHYSICAL_MAP);
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();
var marker1 = new GMarker(new GLatLng(43.57769664771851, 1.402821992034912));
map.addOverlay(marker1);
var html = ;
GEvent.addListener(marker1, 'click', function() {
marker1.openInfoWindowHtml(html);
});
}
else{
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
Démonstration#
Info
Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.142.86/fabien/geotribu/tuto/gmaps-v2/tuto3.html" height="350px" width="100%"></iframe>
Remarque#
Nous verrons par la suite comment ajouter des marqueurs stockés en base de données. Cependant, la méthode sera la même. Il est également possible d'ajouter des marqueurs en appelant un fichier KML ou GeoRSS - nous verrons ceci prochainement.
Conclusion#
La création d'un marqueur est tout aussi facile que l'initialisation de la carte. Il est également possible de personnaliser les icônes des marqueurs grâce à la classe GIcon (http://code.google.com/intl/fr/apis/maps/documentation/reference.html#GIcon).
Auteur#
Fabien Goblet#
Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.
J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.
J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.
Commentaires
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.
Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International 
