Google Maps Faq

FAQ API Google Maps

Date de publication : 20/11/2011

Dernière mise à jour : 02/01/2012

Cette FAQ a été réalisée pour répondre aux questions les plus fréquemment posées surle forum des API Google, principalement sur l'API Google Maps.

Nous tenons à souligner que cette FAQ ne garantit en aucun cas que les informationsqu'elle contient sont correctes ; les auteurs font le maximum, mais l'erreur est humaine.Si vous trouvez une erreur, ou que vous souhaitez devenir rédacteur, lisez Commentparticiper à cette FAQ ?.

Sur ce, on vous souhaite une bonne lecture.

http://www.developpez.com

http://www.developpez.net/forums/f1562/webmasters-developpement-web/javascript/bibliotheques-frameworks/apis-google/

Ont contribué à cette FAQ :

NoSmoking - L'équipe JavaScript (JavaScript) - vermine -


http://www.developpez.net/forums/member.php?u=405341

http://web.developpez.com/equipe/

http://javascript.developpez.com


FAQ API Google Maps

- 3 -Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sourcesconstitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucunereproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de DeveloppezLLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.

http://javascript.developpez.com/faq/google-maps/

1. Informations générales (4) .........................................................................................................................................................42. Introduction (2) ..........................................................................................................................................................................53. Google Maps (22) ......................................................................................................................................................................6

3.1. Les cartes (6) .................................................................................................................................................................... 73.2. Les markers (8) ...............................................................................................................................................................123.3. Les InfoWindows (8) ......................................................................................................................................................17



FAQ API Google Maps



Sommaire > Informations générales

Comment bien utiliser cette FAQ ?

Auteurs : NoSmoking , vermine ,

Le butCette FAQ a été conçue pour être la plus simple possible d'utilisation. Elle tente d'apporter des réponses simples etcomplètes aux questions auxquelles ont souvent été confrontés les développeurs Web en JavaScript.L'organisationLes questions sont organisées par thème, rendant la recherche plus facile.Les réponsesLes réponses peuvent être complétées de liens vers d'autres réponses, vers la documentation en ligne de Google ou versun autre site en rapport.Nouveautés et mises à jourLors de l'ajout ou de la modification d'une question/réponse, un indicateur est placé à côté du titre de la question.Cet indicateur reste visible pour une durée de 15 jours afin de vous permettre de voir rapidement les modificationsapportées.Nous espérons que cette FAQ pourra répondre à vos questions. N'hésitez pas à nous faire part de tous commentaires/remarques/critiques.

lien : Comment participer à cette FAQ ?

Comment participer à cette FAQ ?


Cette FAQ est ouverte à toute collaboration. Pour éviter la multiplication des versions, il serait préférable que toutecollaboration soit transmise aux administrateurs de la FAQ.Plusieurs compétences sont actuellement recherchées pour améliorer cette FAQ.Rédacteur : bien évidemment, toute nouvelle question/réponse est la bienvenue.Correcteur : malgré nos efforts, des fautes d'orthographe ou de grammaire peuvent subsister. Merci de contacter lesadministrateurs si vous en débusquez une... Idem pour les liens erronés.

lien : Quels sont les droits de reproduction de cette FAQ ?

Quels sont les droits de reproduction de cette FAQ ?


Merci de contacter les auteurs pour toute copie, intégrale ou partielle de ce document, voir Comment participer à cetteFAQ ?

lien : Comment participer à cette FAQ ?

Nous tenons à remercier

Auteurs : vermine ,

L'ensemble de l'équipe des rédacteurs de www.developpez.com pour leurs remarques constructives. Je remercieégalement l'incontournable ClaudeLELOUP pour sa relecture orthographique, ainsi que Bovino et djibril pour l'aideà la mise en forme.Finalement, je remercie chaleureusement NoSmoking pour la rédaction de cette Faq !











FAQ API Google Maps



Sommaire > Introduction

Que sont les API Google ?

Auteurs : vermine ,

Google Inc. propose un panel d'outils dans différents domaines y compris celui du développement Web, et c'est celui-ci qui nous intéresse. Plus particulièrement les API JavaScript. Pour n'en citer que deux, il y a la bien connue GoogleMaps mais également Google Analytics.

Qu'est-ce que l'API Google Maps ?

Auteurs : vermine ,

L'API Google Maps est une bibliothèque permettant l'intégration sur une page Web du service Google Maps. C'est unservice de cartographie en perpétuelle évolution. Il vous permet notamment de zoomer sur une carte jusqu'à obtenirun rendu visuel des habitations, des rues, etc. Bref, des zones quelconques vues du ciel.Avec l'API, vous pouvez alors intégrer à votre page Web une carte et utiliser ses fonctionnalités de zoom ou de marker(position d'un endroit précis).N'hésitez pas à consulter l'Introduction à l'API Google Maps.

Cette FAQ est créée à partir de l'API Google Maps V3.




http://www.google.com/about/corporate/company/


http://thecodingmachine.developpez.com/tutoriels/javascript/introduction-api-google-maps/

FAQ API Google Maps



Sommaire > Google Maps



FAQ API Google Maps



Sommaire > Google Maps > Les cartes

Comment insérer une carte dans ma page ?

Auteurs : NoSmoking ,

Il faut au moins une trame HTML :

<!DOCTYPE html><html lang="fr"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[GoogleMaps API V3] Insertion d'une Carte</title> <style type="text/css"> #div_carte { height : 600px; /* IMPERATIF */ width : 600px; margin : auto; border : 1px solid #888; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> </head> <body> <h1>Titre de la carte</h1> <div id="div_carte"></div> </body></html>

Que retrouve-t-on dans ce fichier ?

• En début de fichier on place un DOCTYPE, ici HTML5, afin d'informer le navigateur sur le mode de rendusouhaité.

• Une balise META indiquant que nous sommes en mode plein écran et avec une carte non redimensionnable.• Une balise STYLE où l'on définit au minimum la hauteur du conteneur devant recevoir la carte, ceci est un

impératif.• Une balise SCRIPT d'insertion du lien vers le code de l'API Google Maps, le paramètre sensor=false,

obligatoire, indique que la géolocalisation n'est pas active.• Une balise BODY où l'on trouve :

- un titre éloquent :O) ;- une DIV qui sera le conteneur dans lequel sera affichée notre carte. La DIV doit posséder un ID afin depouvoir être référencée.

Maintenant écrivons la fonction permettant de créer la carte.Pour créer une carte nous utilisons le constructeur google.maps.Map comme suit

function initCarte(){ // création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : 6, 'mapTypeId' : google.maps.MapTypeId.ROADMAP });}// init lorsque la page est chargéegoogle.maps.event.addDomListener( window, 'load', initCarte);

Explication du code :1/ Nous créons un objet, ici oMap, de type google.maps.Map, en passant en paramètre :




FAQ API Google Maps



• l'objet dans lequel celle-ci sera affichée, ici la DIV ayant pour ID "div_carte" ;• les options retenues pour la carte, les options minimales (obligatoires) à initialiser étant :

- center : position centrale de la carte au format google.maps.LatLng( valeur_latitude, valeur_longitude) ;- zoom : zoom initial d'affichage. Plus la valeur est petite, moins la carte présente de détails. À titre informatif,au niveau du 45° parallèle, une carte de 600px avec un zoom de 6 fait environ 1050 km de large ;- mapTypeId : type d'affichage de la carte, c'est une constante de google.maps.MapTypeId.

Cette dernière option (mapTypeId) accepte les constantes suivantes :

• ROADMAP, carte la plus courante avec le plan à plat des routes ;• SATELLITE, carte sur base d'images satellites ;• TERRAIN, carte des reliefs ;• HYBRID, carte satellite avec le plan des routes à plat.

2/ Nous appelons la méthode google.maps.event.addDomListener. Cette méthode mise à disposition par l'API GoogleMaps nous permet de lancer une fonction, ici initCarte, une fois la page chargée.Cette façon de faire permet de placer d'autres actions sur l'événement load. Il est à noter que l'on pourrait se passer decette ligne en mettant le code en fin de page avant fermeture de la balise BODY.Il ne nous reste plus qu'à insérer ce code dans la partie HEAD entre des balises :

<script type="text/javascript"></script>

pour obtenir au final le fichier suivant :

<!DOCTYPE html><html lang="fr"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[GoogleMaps API V3] Insertion d'une Carte</title> <style type="text/css"> #div_carte { height : 600px; /* IMPERATIF */ width : 600px; margin : auto; border : 1px solid #888; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initCarte(){ // création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : 6, 'mapTypeId' : google.maps.MapTypeId.ROADMAP }); } // init lorsque la page est chargée google.maps.event.addDomListener( window, 'load', initCarte); </script> </head> <body> <h1>Titre de la carte</h1> <div id="div_carte"></div> </body>



FAQ API Google Maps



</html>

Pourquoi ma carte ne s'affiche pas complètement quand je la rends visible ?


Pour qu'une carte puisse s'afficher, il faut que son conteneur de destination ait une hauteur non nulle. C'est pourquoiil faut impérativement préciser une hauteur à celui-ci.Exemple :

#div_carte{ width : 600px; /* IMPERATIF */ height : 600px; margin : auto; }

Si le conteneur de la carte possède la propriété CSS display:none, il est considéré comme ayant une hauteur de 0px.Au moment de l'affichage de celui-ci, en passant son display à block, la carte ne sera pas ou incomplètement affichée.Dans le cas où l'on ne veut afficher la carte qu'après une action utilisateur, validation sélection ou autre, il fautencapsuler le conteneur de la carte dans un conteneur parent.Exemple :

<div id="cadre_carte"> <div id="div_carte"></div></div>

Ici aussi il ne faut pas jouer avec la propriété display sur le conteneur parent. On utilisera le CSS suivant :

#cadre_carte { /* display : none; /* A BANNIR */ height : 0px; overflow : hidden; position : relative; /* pour IE jusqu'à au moins V7 */ }

La position:relative permet à certaines versions de IE de réagir correctement.

Il ne reste plus qu'à afficher la carte en fixant une hauteur au conteneur parent :

document.getElementById('cadre_carte').style.height='600px';

Comment empêcher le zoom de la carte ?


Il existe au moins deux façons d'y parvenir.Méthode #1 :Supprimer la barre de contrôle du zoom. Dans ce cas il faut également désactiver le zoom via la molette de la souriset le double-clic :

// création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : 6,





FAQ API Google Maps



'zoomControl' : false, // supprime l'icône de contrôle du zoom 'scrollwheel' : false, // désactive le zoom avec la molette de la souris 'disableDoubleClickZoom' : true, // désactive le zoom sur le double-clic 'mapTypeId' : google.maps.MapTypeId.ROADMAP });

Méthode #2 :Fixer le zoom mini et maxi dans les options de la map :

var DEFAULT_ZOOM = 6; // valeur du zoom souhaité // création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : DEFAULT_ZOOM, 'zoomControl' : false, // supprime l'icône de contrôle du zoom 'minZoom' : DEFAULT_ZOOM, 'maxZoom' : DEFAULT_ZOOM, 'mapTypeId' : google.maps.MapTypeId.ROADMAP });

Nota bene : le fait de mettre un minZoom et un maxZoom n'empêche pas de fixer un zoom. Dans ce cas, il est égalementintéressant d'enlever l'affichage de la barre de contrôle du zoom, qui ne sert donc plus à rien.

Comment affecter/modifier le zoom d'une carte ?


On peut affecter/modifier le zoom de la carte en affectant/modifiant la propriété zoom de celle-ci.L'affectation/modification peut se faire de plusieurs manières :- en affectant la valeur du zoom lors de l'initialisation de la carte.

// création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : 16, // réglage du niveau de zoom de la carte sur 16 'mapTypeId' : google.maps.MapTypeId.ROADMAP });

- en utilisant la méthode setZoom() et en passant en paramètre la valeur du zoom.

oMap.setZoom(16); // réglage du niveau de zoom de la carte sur 16

- en utilisant la méthode setOptions() et en passant en paramètre un objet contenant les options à modifier sous saforme littérale.

oMap.setOptions( {'zoom' : 16}); // réglage du niveau de zoom de la carte sur 16

Comment affecter/modifier le type (aspect) d'une carte ?


On peut affecter/modifier l'aspect de la carte en affectant/modifiant la propriété mapTypeId de celle-ci.Les différents types (aspects) de carte disponibles sont :

• google.maps.MapTypeId.ROADMAP, carte la plus courante avec le plan à plat des routes ;





FAQ API Google Maps



• google.maps.MapTypeId.SATELLITE, carte sur base d'images satellites ;• google.maps.MapTypeId.TERRAIN, carte des reliefs ;• google.maps.MapTypeId.HYBRID, carte satellite avec le plan des routes à plat.

L'affectation/modification peut se faire de plusieurs manières :- en affectant le type de carte lors de l'initialisation de celle-ci.

// création de la carte var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : 6, 'mapTypeId' : google.maps.MapTypeId.ROADMAP });

- en utilisant la méthode setMapTypeId() et en passant en paramètre un des types de carte disponibles.

oMap.setMapTypeId( google.maps.MapTypeId.SATELLITE);

- en utilisant la méthode setOptions() et en passant en paramètre un objet contenant les options à modifier sous saforme littérale.

oMap.setOptions( {'mapTypeId' : google.maps.MapTypeId.SATELLITE});

Comment centrer une carte sur un point particulier ?


Pour centrer la carte sur un point particulier, il suffit d'utiliser la méthode setCenter() de l'objet google.maps.Map.La méthode setCenter(latlng) attend comme paramètre un objet au format google.maps.LatLng :

var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position du centre de la carte oMap.setCenter( oLatLng); // centrage de la carte

On peut également utiliser la méthode panTo() qui diffère par le fait que le déplacement se fait par glissement(animation) de la carte.L'appel à la méthode est le même que précédemment.

var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position du centre de la carte oMap.panTo( oLatLng); // centrage de la carte




FAQ API Google Maps



Sommaire > Google Maps > Les markers

Comment créer un marker ?


Pour créer un marker il faut utiliser le constructeur google.maps.Marker. Ce constructeur prend en paramètre un objetcontenant les options à affecter au marker.Les options minimales à initialiser sont :

• position : position où sera épinglé le marker sur la carte ;• map : la carte sur laquelle sera affiché le marker.

Exemple #1 :

var oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte 'map' : oMap // l'objet carte sur lequel est affiché le marker });

Exemple #2 :

// création de l'objet option var markerOption = { 'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte 'map' : oMap // l'objet carte sur lequel est affiché le marker }; // création du marker var oMarker = new google.maps.Marker( markerOption);

Ne pas mettre de virgule après la dernière déclaration de propriété.

D'autres options peuvent être initialisées à la création du marker :

• animation (Animation)Effet lors de l'affichage du marker ;

• clickable (boolean)La valeur par défaut est true. Si le boolean vaut true, le marker reçoit les événements de la souris ;

• cursor (string)Curseur affiché au survol du marker ;

• draggable (boolean)La valeur par défaut est false. Si le boolean vaut true, le marker peut être déplacé ;

• flat (boolean)La valeur par défaut est false. Si le boolean vaut true, l'ombre du marker n'est pas affichée ;

• icon (string|MarkerImage)Image affichée pour le marker ;

• map (Map|StreetViewPanorama)Carte sur laquelle est accroché le marker ;

• position (LatLng)Position du marker sur la carte ;

• raiseOnDrag (boolean)




FAQ API Google Maps



La valeur par défaut est true. Si le boolean vaut false, l'effet d'animation sur le déplacement (relevé du markeret affichage d'une croix) est annulé ;

• shadow (string|MarkerImage)Image de l'ombre sous le marker ;

• shape (MarkerShape)Zone d'interaction de l'image du marker utilisée pour la réaction avec la souris ;

• title (string)Texte affiché dans une infobulle au survol du marker ;

• visible (boolean)La valeur par défaut est true. Si le boolean vaut false, le marker ne sera pas affiché ;

• zIndex (number)Ordre d'affichage des markers, l'empilement en quelque sorte. Un marker avec un zIndex élevé sera affichépar-dessus celui qui possède un zIndex plus faible.

Comment afficher/masquer un marker ?


Pour afficher/masquer un marker, il suffit d'utiliser la méthode setVisible() de l'objet google.maps.Marker. Cetteméthode accepte un boolean comme paramètre ; true pour afficher, false pour masquer :

oMarker.setVisible(true); // affiche le marker oMarker.setVisible(false); // masque le marker

On peut également utiliser la méthode setOptions(). Dans ce cas, on passe en paramètre l'objet sous sa forme littéralecomme suit :

oMarker.setOptions({'visible' : true}); // affiche le marker oMarker.setOptions({'visible' : false}); // masque le marker

Comment supprimer un marker ?


Pour supprimer un marker, il suffit d'utiliser la méthode setMap() ou setOptions() de l'objet google.maps.Marker, enpassant en paramètre la valeur null.Le marker n'est pas réellement supprimé, il est désaffecté de sa map d'origine :

// supprime le marker oMarker.setMap(null); // méthode avec setMap oMarker.setOptions({'map' : null}); // méthode avec setOptions

Pour le réafficher, il faut lui réaffecter une map en utilisant les mêmes méthodes mais en passant en paramètre laréférence à un objet map :

// affecte le marker à l'objet map oMap oMarker.setMap(oMap); // méthode avec setMap





FAQ API Google Maps



oMarker.setOptions({'map' : oMap}); // méthode avec setOptions

Comment modifier l'aspect (image) d'un marker ?


Pour modifier l'aspect, l'image en fait, d'un marker, il suffit d'utiliser la méthode setIcon() de l'objetgoogle.maps.Marker. Cette méthode accepte une string comme paramètre qui représente l'URL de l'image à afficher :

oMarker.setIcon('http://maps.google.com/mapfiles/marker_green.png'); // affiche un marker vert oMarker.setIcon('http://maps.google.com/mapfiles/marker_yellow.png'); // affiche un marker jaune


oMarker.setOptions({'icon' : 'http://maps.google.com/mapfiles/marker_green.png'}); // affiche un marker vert oMarker.setOptions({'icon' : 'http://maps.google.com/mapfiles/marker_yellow.png'}); // affiche un marker jaune

Cette option peut être initialisée directement à la création du marker :

// création du marker var oMarker = new google.maps.Marker({ 'icon' : 'http://maps.google.com/mapfiles/marker_green.png', // affiche un marker vert 'position' : new google.maps.LatLng(latitude, longitude), // position d'ancrage du marker sur la carte 'map' : oMap // l'objet carte sur lequel est affiché le marker });

On peut mettre n'importe quelle image, mais attention toutefois à la position des ancres qui, par défaut, est le milieubas de l'image.

Comment modifier l'aspect d'un marker au survol de la souris ?


Pour modifier l'aspect d'un marker au survol de la souris, on utilise la méthode setIcon() de l'objet google.maps.Markeren passant en paramètre l'URL de l'image de remplacement.On met l'appel à cette méthode à l'intérieur d'un événement via la méthode google.maps.event.addListener de l'objetgoogle.maps.event :

// changement sur le mouseover google.maps.event.addListener( oMarker, 'mouseover', function(){ if( !this.flagIcon){ this.savIcon = this.getIcon(); // récupération de l'image via la méthode getIcon() this.flagIcon = true; } this.setIcon( 'http://maps.google.com/mapfiles/marker_yellow.png'); }); // restauration sur le mouseout google.maps.event.addListener( oMarker, 'mouseout', function(){ this.setIcon( this.savIcon); });





FAQ API Google Maps



Lorsqu'il y a un changement d'image du marker, un deuxième événement mouseover estdéclenché, ce qui nous oblige à mettre un flag d'initialisation.

lien : Comment modifier l'aspect (image) d'un marker ?

Comment modifier l'aspect du curseur de la souris au survol d'un marker ?


Pour modifier l'aspect du curseur de la souris au survol d'un marker, il suffit d'utiliser la méthode setCursor() del'objet google.maps.Marker. Cette méthode accepte une string comme paramètre qui représente la dénomination CSSdu curseur :

oMarker.setCursor( 'move'); // affiche quatre flèches en croix oMarker.setCursor( 'crosshair'); // affiche une croix fine


oMarker.setOptions( {'cursor' : 'move'}); // affiche quatre flèches en croix oMarker.setOptions( {'cursor' : 'crosshair'}); // affiche une croix fine

Cette option peut être initialisée directement à la création du marker :

// création du marker var oMarker = new google.maps.Marker( { 'cursor' : 'move', // affiche quatre flèches en croix au survol 'position' : new google.maps.LatLng( latitude, longitude),// position d'ancrage du marker sur la carte 'map' : oMap // l'objet carte sur lequel est affiché le marker });

Comment afficher un marker au-dessus des autres ?


Les markers, tout comme les InfoWindows, sont affichés sur la carte suivant leur latitude, ceux ayant les plus petiteslatitudes étant affichés au-dessus de ceux ayant une latitude plus grande. En d'autres termes, ceux qui sont en bas del'écran sont affichés au-dessus de ceux qui sont en haut de l'écran.Dans le cas où deux markers posséderaient la même latitude, c'est l'ordre d'affichage qui est pris en compte. Le premieraffiché passera en dessous du deuxième affiché et ainsi de suite.Pour gérer l'ordre d'affichage, il suffit d'utiliser la méthode setZIndex() de l'objet google.maps.Marker en passant enparamètre la valeur du zIndex souhaitée :

oMarker.setZIndex( valeur_zIndex);


oMarker.setOptions( {'zIndex' : valeur_zIndex});

Important : pour que la gestion soit efficace, il faut que tous les markers aient été initialisés en ce qui concerne le zIndex :





FAQ API Google Maps



oMarker = new google.maps.Marker({ 'zIndex' : 0, 'position' : new google.maps.LatLng( val_latitude, val_longitude), 'map' : oMap });

lien : Comment afficher une InfoWindow au-dessus des autres ?

Pourquoi je ne peux pas mettre un marker au-dessus d'une InfoWindow ?


Les cartes sont constituées à partir d'un empilage de couches (layers) ayant chacune un rôle particulier.On compte, au-dessus de la carte proprement dite, au moins sept couches intéressantes.

• Couche 0 : (mapPane, avec un zIndex:100).Cette couche couvre les images constituant la carte, les fameux titles (carreaux de 256x256 pixels).

• Couche 1 : (overlayLayer, avec un zIndex de 101).Cette couche contient les polygones, polylines et autres.

• Couche 2 : (overlayShadow, avec un zIndex de 102).Cette couche contient les images des ombres des markers.

• Couche 3 : (overlayImage, avec un zIndex de 103).Cette couche contient les markers.

• Couche 4 : (floatShadow, avec un zIndex de 104).Cette couche contient les images des ombres des InfoWindows.

• Couche 5 : (overlayMouseTarget, avec un zIndex de 105).Cette couche contient tous les éléments qui reçoivent les événements de la souris, par exemple le clic sur markervia des maparea.

• Couche 6 : (floatPane, avec un zIndex de 106).Cette couche contient les InfoWindows, c'est la couche supérieure.

Au vu de cet empilement, on constate que, sauf modification de l'ordre de celui-ci (fortement déconseillé), uneInfoWindow sera toujours au-dessus d'un marker.Nota bene : à l'intérieur d'une couche, l'ordre des éléments qui s'y trouvent peut être modifié en jouant sur le zIndexde chacun.

lien : Comment afficher un marker au-dessus des autres ?lien : Comment afficher une InfoWindow au-dessus des autres ?




FAQ API Google Maps



Sommaire > Google Maps > Les InfoWindows

Comment créer une InfoWindow ?


Pour créer une InfoWindow, il faut utiliser le constructeur google.maps.InfoWindow. Ce constructeur prend, ou non,en paramètre un objet contenant les options à affecter à l'InfoWindow :Exemple #1 :

// création d'une infobulle vide en attente d'initialisation var oInfo = new google.maps.InfoWindow();

Exemple #2 :

// création d'une infobulle en attente d'affichage var oInfo = new google.maps.InfoWindow({ 'position' : new google.maps.LatLng( 46.80, 1.70), // position d'ancrage de l'InfoWondow sur la carte 'content' : 'Le centre de la <b>FRANCE</b> n\'est pas loin !'// contenu qui sera affiché });

Ne pas mettre de virgule après la dernière déclaration de propriété.

Les options suivantes peuvent être initialisées à la création d'une InfoWindow :

• content (string|Node)Contenu devant être affiché dans l'InfoWindow ;

• disableAutoPan (boolean)Autorise ou non l'InfoWindow à être visible entièrement lors de son affichage. La valeur par défaut est false, cequi veut dire que l'InfoWindow est affichée entièrement ;

• maxWidth (number)Largeur maximale de l'InfoWindow. La valeur par défaut dépend du contenu à afficher ;

• pixelOffset (Size)Décalage en pixels par rapport à la position, en latitude/longitude, prévue dans l'option position ;

• position (LatLng)Position d'affichage de l'InfoWindow, en tenant compte de l'option pixelOffset éventuelle ;

• zIndex (number)Ordre d'affichage de l'InfoWindow, l'empilement en quelque sorte. Une InfoWindow avec un zIndex élevé seraaffichée par-dessus celle qui possède un zIndex plus faible.

Comment modifier le style d'une InfoWindow ?


Pour une fois la réponse est simple : on ne peut pas. Sauf en allant triturer le DOM.Il faut, dans ce cas, passer par une InfoWindow customisée via le constructeur google.maps.OverlayView.

Pourquoi l'InfoWindow s'affiche sur le dernier marker créé ?


Problème :






FAQ API Google Maps



Lorsque l'on clique sur un marker, l'InfoWindow s'affiche toujours sur le dernier marker créé, affichant les positionscorrectes du marker cliqué.Considérons le code suivant où nous créons une carte à laquelle nous associons quatre markers. Sur ces markers,nous ajoutons un événement lors du clic afin d'afficher la position, latitude et longitude, du marker cliqué dans uneInfoWindow :

function initCarte(){ var tMarker = [ { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon'}, { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris'}, { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux'}, { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille'} ]; var oMap, oMarker, oInfo; var i, nb = tMarker.length; // création de la carte oMap = new google.maps.Map( document.getElementById( 'div_carte'),{ 'center' : new google.maps.LatLng( 46.80, 1.70), 'zoom' : 6, 'mapTypeId' : google.maps.MapTypeId.ROADMAP }); // création infobulle oInfo = new google.maps.InfoWindow(); // création des markers dans une boucle for( i = 0; i < nb; i++){ oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // événement clic sur le marker google.maps.event.addListener( oMarker, 'click', function( data){ // affichage position du marker oInfo.setContent( 'position' :<br>' +data.latLng.toUrlValue(5)); oInfo.open( oMap, oMarker); }); }}// init lorsque la page est chargéegoogle.maps.event.addDomListener(window, 'load', initCarte);

Explication :Au moment de l'exécution de la fonction, la variable oMarker a pour référence le dernier marker initialisé.Solution :- Pour remédier à ce problème, il nous faut utiliser le mot-clé this dans le corps de la fonction mise sur l'événement.- Dans la fonction le this représente l'objet sur lequel s'est déclenché l'événement.- De la même manière, on n'utilisera pas la variable oMap, mais on récupérera via la méthode getMap() la map associéeau marker.

// événement clic sur le marker google.maps.event.addListener( oMarker, 'click', function( data){ // affichage position du marker oInfo.setContent( 'position' :<br>' +data.latLng.toUrlValue(5)); oInfo.open( this.getMap(), this); });

Conclusion :



FAQ API Google Maps



Dans une "fonction événementielle", il est préférable d'utiliser le mot-clé this pour faire référence à l'objet en cours.

Comment afficher une InfoWindow ?


L'affichage d'une InfoWindow peut se faire de plusieurs façons.1/ A l'initialisation. Dans ce cas il suffit de spécifier les options suivantes :

• le content : c'est un minimum pour que cela serve à quelque chose ;• la map : la carte sur laquelle sera affichée l'InfoWindow ;• la position : l'endroit où sera affichée l'InfoWindow, la position doit être au format google.maps.LatLng.

// création d'une infobulle et affichage var oInfo = new google.maps.InfoWindow({ 'content' : 'Le centre de la FRANCE n\'est pas loin !', // contenu qui sera affiché 'map' : oMap, // carte sur laquelle est affichée l'InfoWindow 'position' : new google.maps.LatLng( 46.80, 1.70) // position d'affichage de l'InfoWindow });

2/ En utilisant la position d'un Marker et la méthode open() de l'objet google.maps.InfoWindow. La méthode open(map,anchor) attend deux paramètres :

• map : la carte sur laquelle sera affichée l'InfoWindow ;• anchor : l'objet auquel s'accroche l'InfoWindow.

oInfo.open( oMap, oMarker);

On notera que si la position a déjà été initialisée le paramètre anchor peut être omis.Exemple :

// création d'une infobulle var oInfo = new google.maps.InfoWindow({ 'content' : 'Le centre de la FRANCE n\'est pas loin !', // contenu qui sera affiché 'position' : new google.maps.LatLng( 46.80, 1.70) // position d'affichage de l'InfoWindow }); // affichage de l'InfoWindow oInfo.open( oMap); // seule la référence à la carte est passée en paramètre

3/ En utilisant la méthode setOptions() de l'objet google.maps.InfoWindow et en passant en paramètre un objetcontenant les options à modifier sous sa forme littérale :

var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position d'affichage de l'InfoWindow oInfo.setOptions({'map': oMap, 'position': oLatLng}); // passage des options carte et position

Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?


Problème :Lorsque je crée plusieurs markers dans une boucle avec une seule InfoWindow rien ne s'affiche quand je clique surle marker.





FAQ API Google Maps



Considérons le code suivant où nous créons une carte à laquelle nous associons quatre markers. Sur ces markers, nousajoutons un événement lors du clic afin d'afficher une InfoWindow avec une info propre à chaque marker :

function initCarte(){ var tMarker = [ { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon', 'info' :'<b>Lyon<\/b><br>la suite du texte...'}, { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris', 'info' :'<b>Paris<\/b><br>la suite du texte...'}, { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux', 'info' :'<b>Bordeaux<\/b><br>la suite du texte...'}, { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>la suite du texte...'} ]; var oMap, oMarker, oInfo; var i, nb = tMarker.length; // création de la carte oMap = new google.maps.Map(document.getElementById("div_carte"),{ 'zoom' : 6, 'center' : new google.maps.LatLng( 46.80, 1.75), 'mapTypeId' : google.maps.MapTypeId.ROADMAP }); // création infobulle oInfo = new google.maps.InfoWindow(); // création des markers for( i = 0; i < nb; i++){ // création marker oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // événement clic sur le marker google.maps.event.addListener( oMarker, 'click', function() { // affectation du contenu oInfo.setContent( tMarker[i].info); // affichage InfoWindow oInfo.open( this.getMap(), this); }); }}// init lorsque la page est chargéegoogle.maps.event.addDomListener(window, 'load', initCarte);

Explication :Au moment de l'exécution de la fonction et de l'affectation du contenu à l'InfoWindow, la variable i vaut nb, soit 4 dansle cas ci-dessus, et comme tMarker[4] est indéfini cela entraîne une erreur.Pour remédier à ce problème il existe plusieurs méthodes.Méthode #1 : surcharger l'objet oMarker en initialisant une variable, numero, à la création du marker :

// création des markers for( i = 0; i < nb; i++){ // création marker oMarker = new google.maps.Marker({ 'numero' : i, // ici on sauve la valeur de i 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // événement clic sur le marker google.maps.event.addListener( oMarker, 'click', function() { // affectation du contenu en utilisant this.numero oInfo.setContent( tMarker[this.numero].info); // affichage InfoWindow oInfo.open( this.getMap(), this);



FAQ API Google Maps



}); }

Méthode #2 : passer par une fonction externe à la boucle :

// fonction externe de création des markersfunction setEventMarker( marker, infowindow, texte){ google.maps.event.addListener( marker, 'click', function() { // affectation du texte infowindow.setContent( texte); // affichage InfoWindow infowindow.open( this.getMap(), this); });}

... que l'on appellera dans la boucle de la façon suivante :

// création des markers for( i = 0; i < nb; i++){ oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // événement clicl sur le marker via une fonction externe setEventMarker( oMarker, oInfo, tMarker[i].info); }

Méthode #3 : encapsuler le tout dans une fonction anonyme, réalisation d'une closure, à laquelle on passe en paramètreles données à afficher :

// création des markers for( i = 0; i < nb; i++){ oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // événement clic sur le marker passage par fonction anonyme (function( texte){ google.maps.event.addListener( oMarker, 'click', function() { // affectation du texte passé en paramètre oInfo.setContent( texte); // affichage InfoWindow oInfo.open( this.getMap(), this); }); })(tMarker[i].info); }

Pourquoi l'InfoWindow n'affiche pas le bon contenu ?


Problème :Lorsque je crée plusieurs markers dans une boucle avec une seule InfoWindow, j'obtiens toujours l'affichage du mêmecontenu quand je clique sur le marker.Considérons le code suivant où nous créons une carte à laquelle nous associons quatre markers. Sur ces markers, nousajoutons un événement lors du clic afin d'afficher une InfoWindow avec une info propre à chaque marker :

function initCarte(){




FAQ API Google Maps



var tMarker = [ { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon', 'info' :'<b>Lyon<\/b><br>la suite du texte...'}, { 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris', 'info' :'<b>Paris<\/b><br>la suite du texte...'}, { 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux', 'info' :'<b>Bordeaux<\/b><br>la suite du texte...'}, { 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>la suite du texte...'} ]; var oMap, i, nb = tMarker.length; // création de la carte oMap = new google.maps.Map(document.getElementById("div_carte"),{ 'zoom' : 6, 'center' : new google.maps.LatLng( 46.80, 1.75), 'mapTypeId' : google.maps.MapTypeId.ROADMAP }); // création des markers for( i = 0; i < nb; i++){ // création marker var oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // création infobulle avec texte var oInfo = new google.maps.InfoWindow({ 'content' : tMarker[i].info }); // événement clic sur le marker google.maps.event.addListener( oMarker, 'click', function() { // affichage InfoWindow oInfo.open( this.getMap(), this); }); }}// init lorsque la page est chargéegoogle.maps.event.addDomListener(window, 'load', initCarte);

Explication :Au moment de l'exécution de la fonction, c'est la dernière InfoWindow intialisée qui est prise en compte et donc affichée,c'est celle contenant tMarker[3].info.Solution : Voir les solutions proposées à la question Pourquoi l'InfoWindow n'affiche rien quand je clique sur lemarker ?

Comment afficher une InfoWindow au-dessus des autres ?


Les InfoWindows sont affichées sur la carte suivant leur latitude, celles ayant les plus petites latitudes étant affichéesau-dessus de celles ayant une latitude plus grande. En d'autres termes, celles qui sont en bas de l'écran sont affichéesau-dessus de celles qui sont en haut de l'écran.Dans le cas où deux InfoWindows posséderaient la même latitude, c'est l'ordre d'affichage qui est pris en compte. Lapremière affichée passera en dessous de la deuxième affichée et ainsi de suite.Pour gérer l'ordre d'affichage, il suffit d'utiliser la méthode setZIndex() de l'objet google.maps.InfoWindow en passanten paramètre la valeur du zIndex souhaitée.

oInfo.setZIndex( valeur_zIndex);




FAQ API Google Maps




oInfo.setOptions( {'zIndex' : valeur_zIndex});

Pour gérer cela, on va surcharger l'objet Map en initialisant une variable, zIndexBulle, à la création de la map :

oMap = new google.maps.Map(document.getElementById("div_carte"),{ 'zIndexBulle' : 1, // ici on surcharge pour utilisation 'zoom' : 6, 'center' : new google.maps.LatLng( 46.80, 1.75), 'mapTypeId' : google.maps.MapTypeId.ROADMAP });

Ainsi lors de l'affichage, au clic sur le marker, il n'y aura plus qu'à incrémenter sa valeur et à l'affecter au zIndex del'InfoWindow :

google.maps.event.addListener( oMarker, 'click', function(){ var map = this.getMap(); // récupération de l'objet carte var index = map.zIndexBulle ++; // incrémentation et récupération bulle.setZIndex( index); // affectation à l'InfoWindow bulle.open( map, this); // affichage de l'InfoWindow });

Le code complet d'utilisation donne :

function initCarte(){ var tMarker = [ { 'lat' :45.782129, 'lon' : 3.095521, 'title' :'Clermont-Ferrand', 'info' :'<b>Clermont-Ferrand<\/b><br>la suite du texte...'}, { 'lat' :45.438392, 'lon' : 4.388131, 'title' :'Saint Etienne', 'info' :'<b>Saint Etienne<\/b><br>la suite du texte...'}, { 'lat' :45.767299, 'lon' : 4.834329, 'title' :'Lyon', 'info' :'<b>Lyon<\/b><br>la suite du texte...'}, { 'lat' :45.192063, 'lon' : 5.720395, 'title' :'Grenoble', 'info' :'<b>Grenoble<\/b><br>la suite du texte...'} ]; var oMarker, oInfo, oMap, i, nb = tMarker.length; // création de la carte oMap = new google.maps.Map(document.getElementById("div_carte"),{ 'zIndexBulle' : 1, // ici on surcharge pour utilisation 'zoom' : 6, 'center' : new google.maps.LatLng( 46.80, 1.75), 'mapTypeId' : google.maps.MapTypeId.ROADMAP }); // création des marqueurs for( i = 0; i < nb; i++){ oMarker = new google.maps.Marker({ 'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon), 'map' : oMap, 'title' : tMarker[i].title }); // création infobulle oInfo = new google.maps.InfoWindow({ 'content' : tMarker[i].info }); // ajout evenement sur click (function( bulle){ google.maps.event.addListener( oMarker, 'click', function(){ var map = this.getMap(); // récup. de l'objet carte var index = map.zIndexBulle ++; // incrémentation et récupération bulle.setZIndex( index); // affectation à l'InfoWindow bulle.open( map, this); // affichage de l'InfoWindow



FAQ API Google Maps



}); })(oInfo); }}// init lorsque la page est chargéegoogle.maps.event.addDomListener( window, 'load', initCarte);

Nota bene : nous utilisons, pour la création des InfoWindows, la méthode #3 de Pourquoi l'InfoWindow n'affiche rienquand je clique sur le marker ?

Comment masquer une InfoWindow ?


Pour masquer une InfoWindow, il suffit d'utiliser la méthode close() de l'objet google.maps.InfoWindow.Cette méthode ne prend aucun paramètre.

oInfo.close(); // masque l'InfoWindow

Cette action a le même effet que l'appui sur la croix située dans le coin en haut à droite del'InfoWindow.

On peut également utiliser la méthode setOptions(), en mettant l'option map à null. Dans ce cas, on passe en paramètreun objet contenant les options à modifier sous sa forme littérale.

oInfo.setOptions({'map' : null});




Google Maps Faq

Documents

Transcript of Google Maps Faq