Dans cet exemple, nous allons créer deux cartes :
La première carte, de type "Plan", est fixe. Dessus s'affichent tous les marqueurs pointant vers des lieux caractéristiques.
En survolant les marqueurs avec la souris, un commentaire apparaît. Un "click" sur l'un des marqueurs n'affiche aucune info-bulle, mais va interagir sur la seconde carte.
La seconde carte, de type "Satellite", est déplaçable. Dès qu'un "click" aura été détecté sur la première carte, la seconde carte :
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - deux cartes liées - marqueurs et zoom liés</title> [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script> [7] <script language='JavaScript' type='text/JavaScript'> [8] // <![CDATA[ [9] Fonction load() [10] function load (){ [11] [12] [13] Si le navigateur est compatible avec l'API de Google Maps ... [14] if (GBrowserIsCompatible()) { [15] [16] Fonction "createMarker()" permettant la création d'un marqueur ( Coordonnées, texte figurant dans l'info-bulle, Titre au survol du marqueur par la souris, niveau de zoom ) [17] function createMarker(point,TexteAuFormatHTML,Titre,ValeurDuZoom) { [18] [19] Création d'un nouveau marqueur appelé "marker" aux coordonnées du "point", et ajout d'un commentaire "Titre" apparaissant au survol du marqueur "marker" par la souris ... [20] var marker = new GMarker(point,{title:Titre}); [21] [22] Création d'un nouveau marqueur appelé "markerzoom" aux coordonnées du "point" ... [23] var markerzoom = new GMarker(point); [24] [25] ValZoom = ValeurDuZoom ... [26] var ValZoom = ValeurDuZoom; [27] [28] ... Un observateur d'événement est ajouté au marqueur appelé "marker". L'évenement détecté est "click" (Détecte si un click est effectué sur le marqueur appelé "marker"). Si un click a été effectué sur le marqueur appelé "marker", la fonction située entre les {} sera alors executée ... [29] GEvent.addListener(marker, 'click', function() { [30] [31] ... Suppression tous les marqueurs de la carte "CarteZoom" ... [32] CarteZoom.clearOverlays(); [33] [34] La carte appelée "CarteZoom" se centre sur le point géographique auquel le marqueur est ancré et adopte un niveau de zoom égal à "ValZoom". [35] CarteZoom.setCenter(markerzoom.getPoint(),ValZoom); [36] [37] [38] ... Ajout du marqueur appelé "markerzoom" à la carte "CarteZoom" ... [39] CarteZoom.addOverlay(markerzoom); [40] [41] Ouverture de l'info-bulle rattaché au marqueur appelé "markerzoom" dont le contenu, au format HTML, est égal à "TexteAuFormatHTML" [42] markerzoom.openInfoWindowHtml(TexteAuFormatHTML); [43] }); [44] [45] ... Un observateur d'événement est ajouté au marqueur appelé "markerzoom". L'évenement détecté est "click" (Détecte si un click est effectué sur le marqueur appelé "markerzoom"). Si un click a été effectué sur le marqueur appelé "markerzoom", la fonction située entre les {} sera alors executée ... [46] GEvent.addListener(markerzoom, 'click', function() { [47] [48] Ouverture de l'info-bulle rattaché au marqueur appelé "marker" dont le contenu est au format HTML [49] markerzoom.openInfoWindowHtml(TexteAuFormatHTML); [50] }); [51] [52] Retourne les caractéristiques du marqueur "marker" [53] return marker; [54] } [55] [56] [57] [58] Création de la carte nommée "CarteGlobale" [59] [60] [61] ... Création d'une nouvelle carte ayant pour nom "CarteGlobale" et qui se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementDeCarteGlobale" ... [62] var CarteGlobale = new GMap2(document.getElementById('EmplacementDeCarteGlobale')); [63] [64] ... La carte "CarteGlobale" est centrée sur la Latitude 47.168076, la Longitude 0.235895, avec un niveau de zoom égal à 9 ... [65] CarteGlobale.setCenter(new GLatLng(47.168076,0.235895), 9); [66] [67] [68] ... La possibilitée de déeplacer la carte "CarteGlobale" est supprimée. Elle devient donc fixe ... [69] CarteGlobale.disableDragging(); [70] [71] [72] [73] Création de la carte nommée "CarteZoom" [74] [75] [76] ... Création d'une nouvelle carte ayant pour nom "CarteZoom" et qui se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementDeCarteZoom". Le type de carte est fixé "G_SATELLITE_MAP" c est à dire Satellite ... [77] var CarteZoom = new GMap2(document.getElementById('EmplacementDeCarteZoom'), {mapTypes:[G_SATELLITE_MAP]}); [78] [79] ... La carte "CarteZoom" est centrée sur la Latitude 47.168076, la Longitude 0.235895, avec un niveau de zoom égal à 9 .... [80] CarteZoom.setCenter(new GLatLng(47.168076,0.235895), 9); [81] [82] [83] [84] ... Création des 3 marqueurs figurant sur la carte nomméee "CarteGlobale" ... [85] [86] [87] ... Caractéristiques du marqueur Numéro 1 ... [88] [89] ... Création d'un nouveau point ayant pour Latitude : 47.168076 et Longitude : 0.235895 ... [90] var point = new GLatLng(47.168076,0.235895); [91] ... Création d'un nouveau marker par appel de la fonction creatMarker() ... [92] var marker = createMarker(point,'Point caractéristique N°1<br />Niveau de Zoom : 17','Marqueur 1',17) [93] ... Ajout du marker sur la carte nommée "CarteGlobale" ... [94] CarteGlobale.addOverlay(marker); [95] [96] [97] ... Caractéristiques du marqueur Numéro 2 ... [98] [99] ... Création d'un nouveau point ayant pour Latitude : 47.268076 et Longitude : 0.235895 ... [100] var point = new GLatLng(47.268076,0.235895); [101] ... Création d'un nouveau marker par appel de la fonction creatMarker() ... [102] var marker = createMarker(point,'Point caractéristique N°2<br />Niveau de Zoom : 8','Marqueur 2',8) [103] ... Ajout du marker sur la carte nommée "CarteGlobale" ... [104] CarteGlobale.addOverlay(marker); [105] [106] [107] ... Caractéristiques du marqueur Numéro 3 ... [108] [109] ... Création d'un nouveau point ayant pour Latitude : 47.168076 et Longitude : 0.335895 ... [110] var point = new GLatLng(47.168076,0.335895); [111] ... Création d'un nouveau marker par appel de la fonction creatMarker() ... [112] var marker = createMarker(point,'Point caractéristique N°3<br />Niveau de Zoom : 12','Marqueur 3',12) [113] ... Ajout du marker sur la carte nommée "CarteGlobale" ... [114] CarteGlobale.addOverlay(marker); [115] [116] [117] Si le navigateur n'est pas compatible avec l'API de Google Maps ... [118] }else{ [119] [120] ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". [121] alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps'); [122] } [123] } [124] // ]]> [125] </script> [126] <style type='text/css'> [127] <!-- [128] #contmap { [129] display: block; [130] width: 740px; [131] height: 400px; [132] } [133] #EmplacementDeCarteGlobale { [134] float: left; [135] width: 300px; [136] height: 400px; [137] border: 1px solid #006600; [138] } [139] #EmplacementDeCarteZoom { [140] float: right; [141] width: 430px; [142] height: 400px; [143] border: 1px solid #006600; [144] } [145] --> [146] </style> [147] </head> [148] Au chargement de la page, la fonction load() est executée. A la fermeture de la page, la fonction GUnload() est exécutée [149] <body onload="load()" onunload="GUnload()"><center> [150] [151] La <div> ayant pour id "contmap" fait 740 pixels de largeur et 400 pixels de haut. C'est à l'intérieur de cette <div> que vont venir s'afficher les cartes "CarteGlobale" et "CarteZoom". [152] <div id="contmap"> [153] [154] La <div> ayant pour id "EmplacementDeCarteGlobale" fait 300 pixels de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte "CarteGlobale". [155] <div id="EmplacementDeCarteGlobale"></div> [156] [157] La <div> ayant pour id "EmplacementDeCarteZoom" fait 430 pixels de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte "CarteZoom". [158] <div id="EmplacementDeCarteZoom"></div> [159] [160] </div> [161] </body> [162] </html>
En cours de construction
L'exemple s'appuie sur trois marqueurs prédéfinis. Il est tout à fait possible de les extraire d'un fichier xml , json ou d'une base de données.