Controle
Ajouter un bouton Earth à une carte Google Maps - type G_SATELLITE_3D_MAP - Plug in Google Earth.
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.
Le plug-in Google Earth vous permet d'insérer et de visualier une carte 3D Google Earth dans vos pages web.
A l'aide d'une seule ligne de code, vous allez pouvoir offrir l'opportunité à vos clients de visualiser votre carte, non seulement en 2D avec Google Maps :
mais également en 3D grâce au plug-in Google Earth.
La ligne à ajouter, après avoir créée, puis centrée votre carte, est la suivante :
maCarte.addMapType(G_SATELLITE_3D_MAP);
Ce code signifie :
Il provoque l'affichage d'un nouveau bouton : "Earth", situé, par défaut, en haut à droite de la carte, au milieu des autres boutons permettant de modifier le type de carte.
Exemple :
<script type="text/javascript">
function initialize() {
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new GLatLng(47.399744, 0.685444), 13);
maCarte.addMapType(G_SATELLITE_3D_MAP);
maCarte.setUIToDefault();
}
</script>
Ce Plug-in fonctionne uniquement sous :
Si le plug-in Google Earth n'est pas installé sur votre ordinateur, le message ci-dessous s'affiche en lieu et place de la carte.
Il vous suffit, alors, de cliquer sur le bouton "Téléchargez le plug-in Google Earth maintenant" pour installer le plug-in Google Earth.
Enfin, rechargez votre page web pour que la carte en 3D s'affiche correctement.
Sinon, vous pouvez directement cliquer sur ce lien pour télécharger le plug-in Google Earth.
Pour désinstaller le plug-in Google Earth sous Windows :
Pour désinstaller le plug-in Google Earth sous Mac :
Parfois, lorsqu'une erreur intervient lors de la création d'une instance du plug-in Google Earth, le message ci-dessous s'affiche en lieu et place de la carte et vous invite à re-télécharger le plug-in Google Earth.
<?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 ma première carte</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"});
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... 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"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.399744, la Longitude 0.685444, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.399744, 0.685444), 13);
/* ... On ajoute le type de carte "Earth" à la carte nommée "maCarte". Celui-ci permet d'insérer le bouton "Earth" qui déclenche l'affichage de la carte nommée "maCarte" en 3 dimensions ... */
maCarte.addMapType(G_SATELLITE_3D_MAP);
/* ... Les boutons et contrôles de la carte nommée "maCarte" sont affichés de façon identique à ceux qui apparaissent dans http://maps.google.fr ... */
maCarte.setUIToDefault();
/* 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');
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
<style type="text/css">
<!--
.cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
-->
</style>
</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>
<div class="cadre">
Ajout du bouton "Earth", parmi les types de cartes, qui permet de visualiser les cartes en 3 Dimensions grâce au plugin Google Earth.<br /><br />
Cliquez sur le bouton "Earth", situé en haut à droite de la carte, pour visualiser celle-ci en 3 dimensions.
</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 ma première carte</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[
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... 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 GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.399744, la Longitude 0.685444, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.399744, 0.685444), 13);
/* ... On ajoute le type de carte "Earth" à la carte nommée "maCarte". Celui-ci permet d'insérer le bouton "Earth" qui déclenche l'affichage de la carte nommée "maCarte" en 3 dimensions ... */
maCarte.addMapType(G_SATELLITE_3D_MAP);
/* ... Les boutons et contrôles de la carte nommée "maCarte" sont affichés de façon identique à ceux qui apparaissent dans http://maps.google.fr ... */
maCarte.setUIToDefault();
/* 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');
}
}
//]]>
</script>
<style type="text/css">
<!--
.cadre{margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:center;background-color:#e7e3d7;}
-->
</style>
</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>
<div class="cadre">
Ajout du bouton "Earth", parmi les types de cartes, qui permet de visualiser les cartes en 3 Dimensions grâce au plugin Google Earth.<br /><br />
Cliquez sur le bouton "Earth", situé en haut à droite de la carte, pour visualiser celle-ci en 3 dimensions.
</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>
Attention :
Lorsque le plugin Google Earth n'est pas supporté par le navigateur (Opéra par exemple), le bouton Earth ne s'affichera pas sur la carte.
