Ouverture de fenêtres d'informations depuis les marqueurs

Cet exemple est propulsé par

Si vous suivez la présentation de la librairie GMaps dans l'ordre du site, vous devez désormais être familier de l'ajout de marqueurs sur les cartes GMaps à partir de points (latitude,longitude) .
Il est évidemment primordial d'indiquer des points sur des cartes afin de marquer certaines places, certains endroits, monuments, quartiers, magasins.
Il peut être plus qu'intéressant d'ajouter des compléments d'informations voir toute une ressource de liens et contenus à ces marqueurs placés sur les cartes GMaps.

L'objet de cette page est donc de vous permettre d'ajouter à vos marqueurs GMarker des fenêtes de contenu dont le contenu peut être "toggle()" (ndr : voir référence de la librairie Prototype.js pour présentation de la fonctionnalité toggle() ) en click sur le marqueur c'est à dire que l'on peut gérer l'apparition et disparition des informations supplémentaires du marqueur.


#00 :: Création de fenêtres d'informations sur les marqueurs GMarker #01 :: Création de marqueurs avec fenêtes d'informations personnalisées

Création de fenêtres d'informations sur les marqueurs GMarker

Ce premier exemple permet de créer des fenêtres d'informations permettant de prendre connaissance du nom des stations de métro affichées sur la carte.

L'exemple est testable ci après :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Le code source de l'exemple est recopié ci après :

// tableau de points des stations de métro var points = new Array(); points[0] = new Array(); points[0]['lat'] = 48.875684; points[0]['long'] = 2.325610; points[0]['titre'] = "Saint-Lazare"; points[0]['desc'] = "L'histoire de la gare Saint-Lazare commence en 1837 avec l'ouverture du chemin de fer de Paris à Saint-Germain.<br/> À cette époque on édifia une gare provisoire en bois, l'« embarcadère de l'Ouest», sur la place de l'Europe, au débouché du tunnel des Batignolles, <br/>à l'emplacement de l'ancien parc Tivoli."; points[1] = new Array(); points[1]['lat'] = 48.870013; points[1]['long'] = 2.325747; points[1]['titre'] = "Madeleine"; points[1]['desc'] = "La ligne 14 du métro de Paris est une ligne du réseau métropolitain de Paris. <br/>Elle relie la station Saint-Lazare à la station Bibliothèque François Mitterrand en traversant le centre de Paris. Elle est la première ligne à conduite automatisée du métro parisien.<br/> Avant sa mise en service commerciale, elle fut connue sous son nom de projet : Meteor pour METro Est-Ouest Rapide."; points[2] = new Array(); points[2]['lat'] = 48.865872; points[2]['long'] = 2.334670; points[2]['titre'] = "Pyramides"; points[2]['desc'] = "Pyramides est une station des lignes 7 et 14 du métro de Paris ; elle est située dans le 1er <br/>arrondissement de Paris."; points[3] = new Array(); points[3]['lat'] = 48.858365; points[3]['long'] = 2.347325; points[3]['titre'] = "Châtelet"; points[3]['desc'] = "On appelait châtelets, au Moyen Âge, de petits châteaux établis à la tête d'un pont, au passage d'un gué,<br/> à cheval sur une route en dehors d'une ville ou à l'entrée d'un défilé. On désignait aussi, par le mot châtelet, des ouvrages en bois et en terre <br/>que les assiégeants élevaient de distance en distance entre les lignes de contrevallation et de circonvallation pour appuyer les postes destinés<br/> à garder ces lignes."; points[4] = new Array(); points[4]['lat'] = 48.844717; points[4]['long'] = 2.373930; points[4]['titre'] = "Gare de Lyon"; points[4]['desc'] = "La gare de Lyon est l'une des six gares terminus du réseau de la SNCF à Paris. Elle est située dans le 12e <br/>arrondissement.<br/>C'est à la fois une gare de grandes lignes assurant la desserte d'un grand quart Sud Est de la France, <br/>en particulier des villes de Dijon, Lyon, Grenoble, Saint-Étienne, Marseille, Nice et Montpellier, une gare internationale (Suisse et Italie), <br/>et une gare de lignes de banlieue réalisant la desserte du Sud Est de l'agglomération parisienne."; var map = null; /* fonction intialisatrice de la création de la carte */ function chargerCarteAvecMarqueurEtFenetreInfo () { map = new GMap2(document.getElementById("map_0")); map.disableDragging(); map.setCenter(new GLatLng(48.856558, 2.350966), 10); for (var i = 0; i < points.length; i++) { var point = new GLatLng(points[i]['lat'],points[i]['long']); map.addOverlay(createMarker(point, points[i]['titre'] , points[i]['desc'] )); } } // fonction spécialisée de créations de marqueurs avec // interception d'évènement "click" destiné à créer une fenêtre // d'informations puis à la gérer function createMarker(point, titre , desc) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width :auto; height:auto;'><div id='titre'>"+titre+"</div><span class='msgInfo_0'>"+desc+"</span></div>"); }); return marker; }
Le code HTML du bouton d'action :
<!-- code HTML du bouton d'action --> <input type="button" name="ok_0" value="charger la carte des stations métro ligne 14 avec fenêtres d'informations" onClick="chargerCarteAvecMarqueurEtFenetreInfo();" /> </fieldset>

Création de marqueurs avec fenêtes d'informations personnalisés

Ce second exemple vous permet de créer des marqueurs sur une carte GMaps en ayant auparavant défini un titre et une description qui seront ajoutées dans une fenêtre d'informations attachée au marqueur.
Cet exemple nécessite d'avoir pris connaissance du premier exemple de cette page #147 ainsi que du contenu de la page #146 .

L'exemple est testable ci après sur une carte non déplaçable :

Utilisation de l'exemple #01

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Titre pour la fénêtre d'infos :
Description pour la fenêtre d'infos :
!!! :: vous pouvez ajouter un marqueur avec les informations précédemment indiquées en cliquant sur la carte de ce cadre.

Le code source de cet exemple est recopié ci après :
if (GBrowserIsCompatible()) { var map1 = new GMap2(document.getElementById("map_1")); map1.disableDragging(); map1.setCenter(new GLatLng(48.856558, 2.350966), 14); /* création d'interception d'évènement "click" */ GEvent.addListener(map1, "click", function(marker, point) { // si un marqueur existe on ne fait rien if (marker) { } // s'il n'existe pas on le crée else { map1.addOverlay(createMarkerCustom(point, $F('titre_0') , $F('desc_0') )); } }); } // fonction spécialisée de créations de marqueurs avec // interception d'évènement "click" destiné à créer une fenêtre // d'informations puis à la gérer function createMarkerCustom (point, titre , desc) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<div style='width :auto; height:auto;'><div id='titre'>"+titre+"</div><span class='msgInfo_0'>"+desc+"</span></div>"); }); return marker; }

: 27/01/2007 16:25:18 | : Google, Maps, GMaps, Overlay, openInfoWindowHtml, GMap2.addOverlay(), GMaps2.openInfoWindowHtml(), addOverlay, cartes, cartographie, géolocalisation, marqueurs,

Aucun commentaire enregistré