Info Bulle
Insérer une carte 3D Google Earth dans une fenêtre ou info-bulle.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
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.
<?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=Inserez_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>
<?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=Inserez_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>
