Patrimoine culturel
Visites

   visiteurs

   visiteurs en ligne

Liens


bpapinou.gif

meric_graphisme.gif

Chez Jean-Mi

Chez Jean-Mi

Google earth - Code page google earth

Voilà le code complet de ma page qui affiche google earth et des 2 feuilles de style .
A vous de l'adapter à votre site.
N'oubliez pas de demander à Google une clé API à mettre à la place de la mienne.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html>

 

  <head>

 

    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

 

    <title>google earth on mycomenius</title>

 

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZDoIW1CMRgES87ULstW6KhQYkGc0-09RTj_iHO3dvAccOVoauhTcgHvXBNbtbg0-IsBSlT4YZtICqg"

 

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

 

    <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAZDoIW1CMRgES87ULstW6KhQYkGc0-09RTj_iHO3dvAccOVoauhTcgHvXBNbtbg0-IsBSlT4YZtICqg"

 

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

 

    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"

 

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

 

      

 

      

 

<link href="style_ie.css" rel="stylesheet" type="text/css"

 

  @import url("http://www.google.com/uds/css/gsearch.css");

 

  @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");>

 

<!--[if !IE]> <-->

 

   <link href="style.css" rel="stylesheet" type="text/css"

 

   @import url("http://www.google.com/uds/css/gsearch.css");

 

   @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");>

 

<!--> <![endif]-->

 

</head>


 

<body onload="initialize()" onunload="GUnload" id='table' bgcolor="#000000" text="#FF0000">

 

     

 

     <div BORDER=0 BGCOLOR="#000000"  cellspacing="0" cellpadding="0" class="fond" ALIGN="center" VALIGN="center">    

 

       <img src="./index/page index images/ardoise1.jpg" width=100% height=100%></img>

 

     </div>

 

    

 

    <div  class="fenetre_bas_google_earth" >

 

     <form  action="#" onsubmit="showAddress(this.address.value); return false">

 

      <p>

 

        <input type="text" size="10" name="address" value="Apt France" />

 

        <input type="submit" value="Go!" />

 

      </p>      

 

    </form>

 

     </DIV>

 

    

 

     <div class="texte_bas_google_earth">

 

     <p ><b>  Adana, Apt France, Baranowo, Catania, Jaen, London, Oradea, Tinos, Zakynthos, Porches.</b><br>

 

     <marquee behavior=scroll direction="left" ><b>Ecrivez ces noms pour voir les villes de nos partenaires. Write these towns to see where are our partners..Scrie aceste orase pentru a vedea unde se afla partenerii nostri..Wpisz nazwy  tych miast aby zobaczyc  skad sa nasi  partnerzy..Scrivete a queste citt&agrave; per scoprire dove sono i nostri partners..Escreva o nome das cidades para ver onde estão os nossos parceiros..γράψτε αυτές τις λέξεις για να δείτε τις  πόλεις των εταίρων μας.</b></marquee></p>

 

     </div>

 

    

 

     <DIV id="map" class="google_earth" ALIGN="center" VALIGN="center" style="position: absolute;"  >

 

     </DIV>

 

    

 

     <div  class="bouton_retour_google_earth">

 

        <input type="button" style="background-color: #ffffcc; color:#FF0000" onclick="history.go(-1)" value="Retour vers  Mycomenius ... Return to Mycomenius"/>

 

     <A HREF="#" onClick="window.open('google_earth.html','','fullscreen,scrollbars=auto');return(false)"><img src="index/page index images/bouton_plein_ecran.jpg" border="0"  alt="Plein ecran : Full screen"title="Plein ecran : Full screen"></A>

 

     </div>

 

    

 

    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>

 

      However, it seems JavaScript is either disabled or not supported by your browser.

 

      To view Google Maps, enable JavaScript by changing your browser options, and then

 

      try again.

 

    </noscript>

 

 <script type="text/javascript">

 

    //<![CDATA[

 

/**

 

* hoverControls method to hide/show GControls by 'mouseout'/'mouseover'

 

* @author Esa 2006, 2008

 

*/

 

  GMap2.prototype.hoverControls = function(opt_noCloseIw){

 

        var theMap = this;

 

        theMap.hideControls();

 

        GEvent.addListener(theMap, "mouseover", function(){

 

         theMap.showControls();

 

  });

 

  GEvent.addListener(theMap, "mouseout", function(){

 

         theMap.hideControls();

 

  });

 

  theMap.libraryCard = 19162;

 

  }

 

  GMap.prototype.hoverControls = GMap2.prototype.hoverControls;

 

//fin de code hoverControls

 

   var map = null;

 

    var geocoder = null;

 

function initialize() {

 

      if (GBrowserIsCompatible()) {}

 

    }

 

    

 

    // ==== The "More..." control simply accepts a mouseover to reveal the "Layer" control ===

 

      function MoreControl() {}

 

      MoreControl.prototype = new GControl();

 

      MoreControl.prototype.initialize = function(map) {

 

        var container = document.createElement("div");

 

        container.style.border = "2px solid black";

 

        container.style.fontSize = "12px";

 

        container.style.fontFamily = "Arial, sans-serif";

 

        container.style.width="80px";

 

        container.style.backgroundColor = "#ffffff";

 

        container.style.textAlign = "center";

 

        container.innerHTML = "Photos...";

 

      

 

        map.getContainer().appendChild(container);

 

        

 

        GEvent.addDomListener(container, "mouseover", function() {

 

          map.addControl(layerControl);

 

        });

 

                

 

        return container;

 

      }

 

      

 

      MoreControl.prototype.getDefaultPosition = function() {

 

        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(90, 0));

 

      }

 

      

 

      // ==== The "Layer" control displays the "More..." plus the checkboxes ====

 

      // ==== The checkbox info is passed in the "opts" parameter ====

 

      function LayerControl(opts) {

 

        this.opts = opts;

 

      }

 

      LayerControl.prototype = new GControl();

 

      LayerControl.prototype.initialize = function(map) {

 

        var container = document.createElement("div");

 

        

 

        container.style.border = "2px solid black";

 

        container.style.fontSize = "12px";

 

        container.style.fontFamily = "Arial, sans-serif";

 

        container.style.width="80px";

 

        container.style.backgroundColor = "#ffffff";

 

        container.innerHTML = '<center><b>Photos...<\/b><\/center>';

 

        for (var i=0; i<this.opts.length; i++) {

 

          if (layers[i].Visible) {

 

            var c = 'checked';

 

          } else {

 

            var c = '';

 

          }        

 

          container.innerHTML += '<input type="checkbox" onclick="toggleLayer('+i+')" ' +c+ ' /> '+this.opts[i]+'<br>';

 

        }

 

        

 

        map.getContainer().appendChild(container);

 

        

 

        // === This doesn't do what I want. It kills the control if I mouseover a checkbox ===

 

        // === If you know how to do this better, let me know ===

 

        //GEvent.addDomListener(container, "mouseout", function() {

 

        //  map.removeControl(layerControl);

 

        //});

 

        

 

        setTimeout("map.removeControl(layerControl)",4000);

 

        

 

        return container;

 

      }

 

      

 

      LayerControl.prototype.getDefaultPosition = function() {

 

        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(90, 0));

 

      }

 

      // ==== toggleLayer adds and removes the layers ====

 

      function toggleLayer(i) {

 

        if (layers[i].Visible) {

 

          layers[i].hide();

 

        } else {

 

          if(layers[i].Added) {

 

            layers[i].show();

 

          } else {

 

            map.addOverlay(layers[i]);

 

            layers[i].Added = true;

 

          }

 

        }

 

        layers[i].Visible = !layers[i].Visible;

 

      }

 

      

 

      map = new GMap2(document.getElementById("map"));

 

      

 

      // latitude ,longitude de Apt, altitude

 

      map.setCenter(new GLatLng(43.880000,5.410000),8);

 

    geocoder = new GClientGeocoder();

 

                

 

      // commande module déplacement orientation carte

 

      map.addControl(new GLargeMapControl());

 

      

 

      // commande carte de controle en coin

 

      map.addControl(new GOverviewMapControl());

 

    

 

      // commande échelle en mètres et miles

 

      map.addControl(new GScaleControl());

 

      

 

      // commande zoom à la souris            

 

      map.enableScrollWheelZoom();

 

      

 

      

 

      map.addControl(new GLargeMapControl());

 

      // ==== Create the GLayer()s, and set them  Visible=false Added=false ====

 

      // If you want a GLayer open by default, addOverlay() it and set it  Visible=true Added=true

 

      var layers = [];      

 

          layers[0] = new GLayer("org.wikipedia.en");

 

          layers[0].Visible = false;

 

          layers[0].Added = false;

 

          

 

          layers[1] = new GLayer("org.wikipedia.fr");

 

          layers[1].Visible = false;

 

          layers[1].Added = false;

 

          

 

          layers[2] = new GLayer("com.youtube.all");

 

          layers[2].Visible = false;

 

          layers[2].Added = false;

 

          

 

          layers[3] = new GLayer("com.panoramio.all");

 

          layers[3].Visible = false;

 

          layers[3].Added = false;

 

          layers[4] = new GLayer("com.panoramio.popular");

 

          map.addOverlay(layers[3]);  // This one open by default

 

          layers[4].Visible = true;

 

          layers[4].Added = true;

 

          

 

          layers[5] = new GLayer("com.google.ugc.c752d13e87c4fbd7");

 

          layers[5].Visible = false;

 

          layers[5].Added = false;

 

          

 

        

 

      // === Create the layerControl, but don't addControl() it ===

 

      // = Pass it an array of names for the checkboxes =

 

      var layerControl = new LayerControl(["Wiki EN", "Wiki FR", "Videos",  "Photos", "Popular", "Webcam"]);

 

      // === Create the MoreControl(), and do addControl() it ===

 

      map.addControl(new MoreControl());

 

    

 

        // commandes pour afficher google earth

 

        map.setMapType(G_SATELLITE_3D_MAP);

 

        var mapControl = new GMapTypeControl();

 

        

 

        // commandes pour relief

 

        map.addMapType(G_PHYSICAL_MAP);

 

        

 

        // commande pour hoverControls method to hide/show GControls by 'mouseout'/'mouseover'

 

        map.hoverControls();

 

        

 

          // commandes pour mettre la carte satellite au premier plan

 

        map.addMapType(G_SATELLITE_MAP);

 

        map.setMapType(G_SATELLITE_MAP);

 

        

 

         // commandes pour bouton google earth

 

        map.addMapType(G_SATELLITE_3D_MAP);

 

                  

 

        // commandes pour bouton multi commandes en lève ces 3 lignes pour avoir la rangée de boutons et place du bouton

 

       map.addControl(new GMenuMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0,0)));

 

        map.addOverlay(marker);

 

        

 

        // commandes pour fenetre de géolocalisation

 

        function showAddress(address) {

 

      if (geocoder) {

 

        geocoder.getLatLng(

 

          address,

 

          function(point) {

 

            if (!point) {

 

              alert(address + " not found");

 

            } else {

 

              map.setCenter(point, 13);

 

             // 3 lignes ci dessous pour faire apparaitre sur la carte un marker et une fenêtre d'info

 

              // var marker = new GMarker(point);

 

               //map.addOverlay(marker);

 

               //marker.openInfoWindowHtml(address);

 

            }

 

          }

 

        );

 

      }

 

    }

 

    //]]>

 

    </script>

 

 

 

</body>

 

 </html>   

feuille de style style.css

/* dimensions fond derrière noir =000000*/
  .fond { position: absolute; top: 0px; left: 0px; background-color: #000000;
          width: 100%; height: 100% ; background-repeat: no-repeat ;
          font: 15px Verdana; font-weight: bold;color: #00FF00;}
      /* dimensions du tableau devant */
  .table_au_dessus  { position: absolute; top:0px; left: 0px; width: 100%; height: 100%; }
  .google_earth  { position: absolute; top:7%; left: 5%; width: 89%; height: 84%;color: #000000;  }
  .fenetre_bas_google_earth  { position: absolute; bottom:5%; left: 3%; z-index : 2;width: 18%; height: 5%;color: #000000;  }
  .texte_bas_google_earth  { position: absolute; bottom:0%; right: 1%; z-index : 2;width: 78%; height: 10%;color: #FFFF00;  }
  .bouton_retour_google_earth  { position: absolute; top:2%; left: 35%;z-index : 2;height: 3%;color: #FFFF00;  }
 

feuille de style style_ie.css

/* dimensions fond derrière noir =000000*/
  .fond { position: absolute; top: 0px; left: 0px; background-color: #000000;
          width: 100%; height: 100% ; background-repeat: no-repeat ;
          font: 15px Verdana; font-weight: bold;color: #00FF00;}
      
   /* dimensions du tableau devant */
  .table_au_dessus  { position: absolute; top:0px; left: 0px; width: 100%; height: 100%; }
  .google_earth  { position: absolute; top:7%; left: 5%; width: 89%; height: 85%;color: #000000;  }
  .fenetre_bas_google_earth  { position: absolute; bottom:2%; left: 3%; z-index : 2;width: 18%; height: 5%;color: #000000;  }
  .texte_bas_google_earth  { position: absolute; bottom:-2%; right: 1%; z-index : 2;width: 78%; height: 10%;color: #FFFF00;  }
  .bouton_retour_google_earth  { position: absolute; top:2%; left: 35%; z-index : 2; height: 3%;color: #FFFF00;  }
 





Date de création : 18/02/2009 · 10:49
Dernière modification : 20/01/2010 · 18:03
Catégorie : Google earth
Page lue 5271 fois


Imprimer l'article Imprimer l'article

 
Films d'animation
Connexion...
 Liste des membres Membres : 37
membres 10 derniers membres :
alankoz    essai    Alain    michel84    chmol44    feraud    maritina    mido    Penanders    tebelo   

Votre pseudo :

Mot de passe :

[ Mot de passe perdu ? ]


[ Devenir membre ]


  Membre en ligne :
  Anonymes en ligne : 25

Total visites Total visites: 430116  

Record connectés :
Record connectés :Membres: 7

Le 17/12/2008 @ 21:40

Record connectés :Cumulé : 160

Le 03/09/2023 @ 10:51

^ Haut ^
haut de page
bas de page