Api Google Maps flèche Info Bulle flèche Insérer une carte 3D Google Earth dans une fenêtre ou info-bulle.

INSERER UNE CARTE 3D GOOGLE EARTH DANS UNE INFO-BULLE

Article créé le : 24/02/2009
 

Présentation

Il peut-être intéressant d'insérer, dans une info-bulle, une carte 3D Google Earth pour visualiser les environs immédiates du marqueur.

Pour cela nous allons utiliser getEarthInstance, et nous inspirer du tutoriel Mini Map in Infowindow.

A noter, que le contrôle de navigation de la carte 3D, est volontairement masqué, afin d'éviter qu'il ne soit tronqué en raison de la taille de l'info-bulle.

Carte

Géolocalisation de la cathédrale Saint-Gatien à Tours
Latitude : 47.395602
Longitude : 0.694453

Code

Code : Avec Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com - Info-bulle contenant une carte 3D Google Earth</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* ... Déclaration des variables globales ... */
  • var maCarte;
  • var iconeRouge;
  • var point;
  • var largeurCarte3D, hauteurCarte3D;
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... Caractéristiques et paramètres de l'icône nommé "iconeVert" ... */
  • var icone = new google.maps.Icon();
  • icone.iconSize = new google.maps.Size(12,20);
  • icone.shadowSize = new google.maps.Size(20,22);
  • icone.iconAnchor = new google.maps.Point(6,20);
  • icone.infoWindowAnchor = new google.maps.Point(5,1);
  • iconeVert = new google.maps.Icon(icone, 'http://labs.google.com/ridefinder/images/mm_20_green.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"), {mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP,G_PHYSICAL_MAP]});
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.395602, la Longitude 0.694453, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.395602,0.694453), 13);
  • /* ... Ajout du contrôle "ScaleControl" (Echelle) à la carte nommée "maCarte" ... */
  • maCarte.addControl(new google.maps.ScaleControl());
  • /* ... Ajout du contrôle "SmallMapControl" (Déplacement et Zoom : petite taille) à la carte nommée "maCarte" ... */
  • maCarte.addControl(new google.maps.SmallMapControl());
  • /* ... Ajout du contrôle "MenuMapTypeControl" (Sélection du type de carte par menu déroulant) à la carte nommée "maCarte" ... */
  • maCarte.addControl(new google.maps.MenuMapTypeControl());
  • /* ... Calcul de la hauteur et largeur de la carte contenue dans l'info-bulle ... */
  • /* ... en fonction de la taille de l'emplacement de la carte nommée "maCarte" ... */
  • hauteurGrandeCarte = document.getElementById("EmplacementDeMaCarte").offsetHeight;
  • largeurGrandeCarte = document.getElementById("EmplacementDeMaCarte").offsetWidth;
  • largeurCarte3D = parseInt(largeurGrandeCarte*0.71);
  • hauteurCarte3D = parseInt(hauteurGrandeCarte*0.54);
  • /* ... Création d'un point nommé "point" situé au centre de la carte nommée "maCarte" ... */
  • point = maCarte.getCenter();
  • /* ... Appel de la fonction "ajouterMarqueur()" ... */
  • ajouterMarqueur(point, "Cliquez moi pour ouvrir la mini-carte");
  • /* ... Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Fonction ajouterMarqueur() */
  • /* Cette fonction est destinée à ajouter un marqueur sur la carte */
  • /* point : point ou le marqueur sera ancré sur la carte */
  • /* titreMiniCarte : Titre apparaissant sous le marqueur lorsque le curseur le survole */
  • function ajouterMarqueur(point,titreMiniCarte) {
  • /* ... Création d'un nouveau marquer nommé "marqueur" ancré sur le point nommé "point" ... */
  • /* ... symbolisé par l'icône "iconeVert" et dont le titre sera "titreMiniCarte" ... */
  • var marqueur = new google.maps.Marker(point,{icon:iconeVert, title:titreMiniCarte});
  • /* ... Ajout d'un observateur d'événement au marqueur nommé "marqueur". ...*/
  • /* ... L'événement observé est le "click". Dès qu'un "click" sera détecté alors ...*/
  • google.maps.Event.addListener(marqueur, "click", function() {
  • /* ... contenuHtmlInfoBulle : Contenu de l'info-bulle au format HTML en précisant sa taille et sa largeur ...*/
  • var contenuHtmlInfoBulle = "<div id='EmplacementMiniCarte3D' style='width:"+largeurCarte3D+"px;height:"+hauteurCarte3D+"px'></div>";
  • /* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur" et dont le contenu sera "contenuHtmlInfoBulle" ...*/
  • marqueur.openInfoWindowHtml(contenuHtmlInfoBulle);
  • /* ... Après un délai de 3 secondes (= 3000 ms), appel de la fonction afficheMini() ...*/
  • /* ... Ce délai est nécessaire afin de permettre l'ouverture de l'info-bulle avant ...*/
  • /* ... d'afficher à l'intérieur la mini carte au format 3D Google Earth ... */
  • setTimeout("afficheMini();",3000);
  • });
  • /* ... Ajout à la carte nommée "maCarte" du marqueur nommé "marqueur" ... */
  • maCarte.addOverlay(marqueur);
  • }
  • /* Fonction afficheMini() */
  • /* Cette fonction est destinée à afficher une mini carte 3D Google Earth dans l'info-bulle du marqueur */
  • function afficheMini(){
  • /* ... conteneurMiniCarte3D correspond à l'élément ayant pour identifiant id="EmplacementCarte3D" ...*/
  • /* ... C'est le conteneur dans lequel va venir s'afficher la carte 3D Google Earth ...*/
  • var conteneurMiniCarte3D = document.getElementById("EmplacementMiniCarte3D");
  • /* ... Fixe la largeur de "conteneurMiniCarte3D" ...*/
  • conteneurMiniCarte3D.style.width = largeurCarte3D+"px";
  • /* ... Fixe la hauteur de "conteneurMiniCarte3D" ...*/
  • conteneurMiniCarte3D.style.height = hauteurCarte3D+"px";
  • /* ... Fixe une bordure noire d'un pixel d'épaisseur à "conteneurMiniCarte3D" ...*/
  • conteneurMiniCarte3D.style.border = "1px solid #CCCCCC";
  • /* ... Création d'une nouvelle carte nommée "miniCarte3d" qui va s'afficher dans "conteneurMiniCarte3D" et possédant un seul type de carte : G_SATELLITE_3D_MAP (=3D Google Earth) ...*/
  • var miniCarte3d = new google.maps.Map2(conteneurMiniCarte3D,{mapTypes:[G_SATELLITE_3D_MAP]});
  • /* ... Centre la carte nommée "miniCarte3d" sur le point nommé "point" avec un niveau de zoom égal à 18 ...*/
  • miniCarte3d.setCenter(point , 18);
  • /* ... ...*/
  • miniCarte3d.getEarthInstance(function(ge){
  • /* ... Masque le contrôle de navigation Google Earth ...*/
  • ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
  • /* ... Détermination des options à appliquer à la carte nommée "miniCarte3d" ...*/
  • var options = ge.getOptions();
  • /* ... Affiche la barre d'état dans la carte nommée "miniCarte3d" ...*/
  • options.setStatusBarVisibility(true);
  • /* ... Masque la vue d'ensemble de la carte nommée "miniCarte3d" ...*/
  • options.setOverviewMapVisibility(false);
  • /* ... Masque l'échelle de la carte nommée "miniCarte3d" ...*/
  • options.setScaleLegendVisibility(false);
  • /* ... Affiche l'atmosphère autour de la planète pour la carte nommée "miniCarte3d" ...*/
  • options.setAtmosphereVisibility(true);
  • /* ... Autorise le zoom et le panoramique pour la carte nommée "miniCarte3d" ...*/
  • options.setMouseNavigationEnabled(true);
  • });
  • }
  • /* ...Appelle la fonction "initialize" lorsque la page web sera chargée ... */
  • google.setOnLoadCallback(initialize);
  • //]]>
  • </script>
  • </head>
  • <body>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>

Code : Sans Google Ajax API Loader

  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte.com - Info-bulle contenant une carte 3D Google Earth</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* ... Déclaration des variables globales ... */
  • var maCarte;
  • var iconeRouge;
  • var point;
  • var largeurCarte3D, hauteurCarte3D;
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* ... Caractéristiques et paramètres de l'icône nommé "iconeVert" ... */
  • var icone = new GIcon();
  • icone.iconSize = new GSize(12,20);
  • icone.shadowSize = new GSize(20,22);
  • icone.iconAnchor = new GPoint(6,20);
  • icone.infoWindowAnchor = new GPoint(5,1);
  • iconeVert = new GIcon(icone, 'http://labs.google.com/ridefinder/images/mm_20_green.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"), {mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP,G_PHYSICAL_MAP]});
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.395602, la Longitude 0.694453, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.395602,0.694453), 13);
  • /* ... Ajout du contrôle "ScaleControl" (Echelle) à la carte nommée "maCarte" ... */
  • maCarte.addControl(new GScaleControl());
  • /* ... Ajout du contrôle "SmallMapControl" (Déplacement et Zoom : petite taille) à la carte nommée "maCarte" ... */
  • maCarte.addControl(new GSmallMapControl());
  • /* ... Ajout du contrôle "MenuMapTypeControl" (Sélection du type de carte par menu déroulant) à la carte nommée "maCarte" ... */
  • maCarte.addControl(new GMenuMapTypeControl());
  • /* ... Calcul de la hauteur et largeur de la carte contenue dans l'info-bulle ... */
  • /* ... en fonction de la taille de l'emplacement de la carte nommée "maCarte" ... */
  • hauteurGrandeCarte = document.getElementById("EmplacementDeMaCarte").offsetHeight;
  • largeurGrandeCarte = document.getElementById("EmplacementDeMaCarte").offsetWidth;
  • largeurCarte3D = parseInt(largeurGrandeCarte*0.71);
  • hauteurCarte3D = parseInt(hauteurGrandeCarte*0.54);
  • /* ... Création d'un point nommé "point" situé au centre de la carte nommée "maCarte" ... */
  • point = maCarte.getCenter();
  • /* ... Appel de la fonction "ajouterMarqueur()" ... */
  • ajouterMarqueur(point, "Cliquez moi pour ouvrir la mini-carte");
  • /* ... Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Fonction ajouterMarqueur() */
  • /* Cette fonction est destinée à ajouter un marqueur sur la carte */
  • /* point : point ou le marqueur sera ancré sur la carte */
  • /* titreMarqueur : Titre apparaissant sous le marqueur lorsque le curseur le survole */
  • function ajouterMarqueur(point,titreMarqueur) {
  • /* ... Création d'un nouveau marquer nommé "marqueur" ancré sur le point nommé "point" ... */
  • /* ... symbolisé par l'icône "iconeVert" et dont le titre sera "titreMarqueur" ... */
  • var marqueur = new GMarker(point,{icon:iconeVert, title:titreMarqueur});
  • /* ... Ajout d'un observateur d'événement au marqueur nommé "marqueur". ...*/
  • /* ... L'événement observé est le "click". Dès qu'un "click" sera détecté alors ...*/
  • GEvent.addListener(marqueur, "click", function() {
  • /* ... contenuHtmlInfoBulle : Contenu de l'info-bulle au format HTML en précisant sa taille et sa largeur ...*/
  • var contenuHtmlInfoBulle = "<div id='EmplacementMiniCarte3D' style='width:"+largeurCarte3D+"px;height:"+hauteurCarte3D+"px'></div>";
  • /* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur" et dont le contenu sera "contenuHtmlInfoBulle" ...*/
  • marqueur.openInfoWindowHtml(contenuHtmlInfoBulle);
  • /* ... Après un délai de 3 secondes (= 3000 ms), appel de la fonction afficheMini() ...*/
  • /* ... Ce délai est nécessaire afin de permettre l'ouverture de l'info-bulle avant ...*/
  • /* ... d'afficher à l'intérieur la mini carte au format 3D Google Earth ... */
  • setTimeout("afficheMini();",3000);
  • });
  • /* ... Ajout à la carte nommée "maCarte" du marqueur nommé "marqueur" ... */
  • maCarte.addOverlay(marqueur);
  • }
  • /* Fonction afficheMini() */
  • /* Cette fonction est destinée à afficher une mini carte 3D Google Earth dans l'info-bulle du marqueur */
  • function afficheMini(){
  • /* ... conteneurMiniCarte3D correspond à l'élément ayant pour identifiant id="EmplacementCarte3D" ...*/
  • /* ... C'est le conteneur dans lequel va venir s'afficher la carte 3D Google Earth ...*/
  • var conteneurMiniCarte3D = document.getElementById("EmplacementMiniCarte3D");
  • /* ... Fixe la largeur de "conteneurMiniCarte3D" ...*/
  • conteneurMiniCarte3D.style.width = largeurCarte3D+"px";
  • /* ... Fixe la hauteur de "conteneurMiniCarte3D" ...*/
  • conteneurMiniCarte3D.style.height = hauteurCarte3D+"px";
  • /* ... Fixe une bordure noire d'un pixel d'épaisseur à "conteneurMiniCarte3D" ...*/
  • conteneurMiniCarte3D.style.border = "1px solid #CCCCCC";
  • /* ... Création d'une nouvelle carte nommée "miniCarte3d" qui va s'afficher dans "conteneurMiniCarte3D" et possédant un seul type de carte : G_SATELLITE_3D_MAP (=3D Google Earth) ...*/
  • var miniCarte3d = new GMap2(conteneurMiniCarte3D,{mapTypes:[G_SATELLITE_3D_MAP]});
  • /* ... Centre la carte nommée "miniCarte3d" sur le point nommé "point" avec un niveau de zoom égal à 18 ...*/
  • miniCarte3d.setCenter(point , 18);
  • /* ... ...*/
  • miniCarte3d.getEarthInstance(function(ge){
  • /* ... Masque le contrôle de navigation Google Earth ...*/
  • ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
  • /* ... Détermination des options à appliquer à la carte nommée "miniCarte3d" ...*/
  • var options = ge.getOptions();
  • /* ... Affiche la barre d'état dans la carte nommée "miniCarte3d" ...*/
  • options.setStatusBarVisibility(true);
  • /* ... Masque la vue d'ensemble de la carte nommée "miniCarte3d" ...*/
  • options.setOverviewMapVisibility(false);
  • /* ... Masque l'échelle de la carte nommée "miniCarte3d" ...*/
  • options.setScaleLegendVisibility(false);
  • /* ... Affiche l'atmosphère autour de la planète pour la carte nommée "miniCarte3d" ...*/
  • options.setAtmosphereVisibility(true);
  • /* ... Autorise le zoom et le panoramique pour la carte nommée "miniCarte3d" ...*/
  • options.setMouseNavigationEnabled(true);
  • });
  • }
  • //]]>
  • </script>
  • </head>
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <noscript>
  • <p>Attention : </p>
  • <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
  • <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>