Api Google Maps flèche Controle flèche Ajouter un bouton Earth à une carte Google Maps - type G_SATELLITE_3D_MAP - Plug in Google Earth.

Ajouter un bouton affichant une carte Google Maps en 3D
grâce au plug-in Google Earth

Article créé le : 10/10/2009
Dernière modification le : 05/12/2009

Présentation

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 :

  • Plan,
  • Relief,
  • Mixte,
  • Satellite,

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 :

  • qu'à la carte nommée maCarte,
  • on va ajouter une nouveau type de carte addMapType,
  • correspondant à la carte en 3D de Google Earth (G_SATELLITE_3D_MAP).

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.

Insérer un bouton Earth pour visualiser la carte en 3D

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>

Caractéristiques du Plug-in Google Earth

Ce Plug-in fonctionne uniquement sous :

  • Microsoft Windows 2000, XP et Vista avec les navigateurs suivants :
    • Google Chrome 1.0 et +
    • IE 6.0 et +
    • Firefox 2.0 et +
    • Flock 1.0 et +
  • Apple Mac OS X 10.4 et supérieur (Intel et PowerPC) avec les navigateurs suivants :
    • Safari 3.1 et +
    • Firefox 3.0 et +

Installer le Plug-in Google Earth

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.

Téléchargez le plug in Google Earth en cliquant ici

Sinon, vous pouvez directement cliquer sur ce lien pour télécharger le plug-in Google Earth.

Désinstaller le Plug-in Google Earth

Pour désinstaller le plug-in Google Earth sous Windows :

  • allez dans le menu "Démarrer",
  • sélectionnez "Tous les programmes",
  • sélectionnez "Google Earth",
  • cliquez sur "Uninstall Google Earth Plug-in".

Pour désinstaller le plug-in Google Earth sous Mac :

Erreur lors de la création d'une instance du Plug-in Google Earth

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.

Re-Téléchargez le plug in Google Earth suite à une erreur lors de la création d'une instance Google Earth

Carte

Ciquez sur le bouton "Earth" situé en haut à droite de la carte, pour l'afficher en 3 Dimensions.
Le passage de la 2D à la 3D n'est pas immédiat. Il faut patienter quelques instants.

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 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=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"});
  • /* 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>

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 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=Insérez_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>

Remarque(s)

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.