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&v=2&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à 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; }