Dernièrement j'avais rédigé cette page-ci :
<!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">
<head>
<title>:: Extraction de Données Geocode ::</title>
<link rel="shortcut icon" href="_.ico" />
<style type="text/css">
body{margin:42px 1% 20px 1%;font-family:verdana,arial sans-serif;font-size:0.8em;background:#666}
#map_canvas{z-index:1;display:inline-block;width:84%;height:620px}
.bandeau{z-index:9;display:inline-block;position:absolute;top:17px;right:1%;width:98%;height:24px;background:#ffb0ff}
.formulaire{z-index:10;display:inline-block;position:absolute;top:4px;right:1%}
#cadre a:link{color:blue;text-decoration:none;padding:3px}
#cadre a:visited{color:blue;background:#999;padding:3px}
#cadre a:hover{color:#fff;background:#999;padding:3px}
#cadre a:active{color:#ffb0ff;background:#999;padding:3px}
.titre{color:#ccc;font-size:1.8em}
ul{color:#ff00ff;text-align:left;background:#fff;padding:6px 6px 6px 24px;list-style-type:circ}
.adresse1{display:inline-block;width:440px;border:3px solid #ffb0ff;color:#555;text-align:right;background:#ffb0ff;padding-left:6px;padding-right:8px;font-family:verdana,arial
sans serif;font-size:1em}
.adresse1:hover{background:#fff;border:3px solid #ffb0ff;color:#000}
.adresse2{display:inline-block;width:1.8em;;font-family:verdana,arial sans serif;font-size:1em;color:#ff00ff;margin-left:-5px;background:#ff00ff;border:3px solid #ff00ff}
.adresse2:hover{background:#00ffff;border:3px solid #00ffff;color:#00ffff;cursor:pointer}
#cadre{z-index:15;display:inline-block;position:absolute;top:42px;right:1%;width:15.8%;height:620px;overflow:auto;background:#fff;margin:0;border-left:1px solid #666;line-height:1.5em;text-align:center;min-width:135px}
.italic{font-style:italic}
li:first-letter{font-size:1.5em}
.petit{font-size:0.7em;color:#555}
:focus{outline:0}
</style>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=PLACER-ICI-VOTRE-API-KEY" type="text/javascript">
</script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(48.85,2.34), 12);
map.setUIToDefault();
geocoder = new GClientGeocoder();
}
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Désolé, ce lieu n'est pas accessible !");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address);
}
}
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<!-- Creates a simple input box where you can enter an address
and a Search button that submits the form. //-->
<form class="formulaire" action="#" onsubmit="showLocation(); return false;">
<p>
<input class="adresse1" onclick="if(this.value==':: choisissez un lieu dans la liste, ou saisissez votre requête ici ::')this.value=' ';" type="text" name="q" value=":: choisissez un
lieu dans la liste, ou saisissez votre requête ici ::" />
<input class="adresse2" type="submit" name="find" value="" />
</p>
</form>
<div id="map_canvas"></div>
<div class="bandeau"></div>
<!-- Sample addresses //-->
<div id="cadre"><br /><span class="titre">navigation</span><br />
<ul>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Moscou, Russie');return false;">Moscou, Russie</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('avenue des Pléiades, Bruxelles, Belgique');return false;">avenue des Pléiades, Bruxelles, Belgique</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Ghlin, Belgique');return false;">Ghlin, Belgique</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Ardèche, France');return false;">Ardèche, France</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('rue de la Garenne, Herbeumont, Belgique');return false;">rue de la Garenne, Herbeumont, Belgique</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('6 rue Renier, Grand-Leez Belgique');return false;">6 rue Renier, Grand-Leez, Belgique</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('avenue de Mendiguren Nice, France');return false;">avenue de Mendiguren, Nice, France</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('48 rue des Carrières, Perros-Guirec, France');return false;">48 rue des Carrières, Perros-Guirec, France</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Berlin, Allemagne');return false;">Berlin, Allemagne</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Lausanne, Suisse');return false;">Lausanne, Suisse</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Londres, Angleterre');return false;">Londres, Angleterre</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Copenhague, Danemark');return false;">Copenhague, Danemark</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Varsovie, Pologne');return false;">Varsovie, Pologne</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Florence, Italie');return false;">Florence, Italie</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('Athènes, Grèce');return false;">Athènes, Grèce</a></li>
<li><a class="lien" href="javascript:void(0)"
onclick="findLocation('New York, USA');return false;">New York, USA</a></li>
<li><a href="javascript:void(0)"
onclick="findLocation('Montreal, Canada');return false;">Montreal, Canada</a></li>
<li><a href="javascript:void(0)"
onclick="findLocation('Shanghai, Chine');return false;">Shanghai, Chine</a></li>
<li><a href="javascript:void(0)"
onclick="findLocation('Pékin, Chine');return false;">Pékin, Chine</a></li>
<li><a href="javascript:void(0)"
onclick="findLocation('Tokyo, Japon');return false;">Tokyo, Japon</a></li>
</ul>
</div>
</body>
</html>
Elle semble fonctionner parfaitement avec FF, IE8, Chrome, Safari et Opera.
Pour ta propre map (carte géo) tu dois saisir les coordonnées du lieu que tu auras choisi : latitude, longitude, altitude. Un moyen simple de définir cela, est de lancer GoogleEarth, puis d'y pointer ton lieu à l'altitude choisie, et enfin de lancer l'application GoogleMaps (dernière icône en haut à droite de la barre de GoogleEarth). Aussitôt ouverte, la fenêtre GoogleMaps propose une barre horizontale ou apparaissent notamment une suite de trois nombres : latitude, longitude et altitude. Tu fais un copier-coller dans une page bloc-note, tu extrais les 3 données et tu les copies dans le script de ta propre page selon que GoogleMaps le renseigne ici :
http://code.google.com/intl/fr/apis/maps/documentation/introduction.html pour une série de maps basiques. Accède au code source d'un exemple que tu auras choisi ...et tu le copies librement. Par exemple celle-ci qui propose des fonctions élémentaires :
http://code.google.com/intl/fr/apis/maps/documentation/examples/control-maptypes.html
Tout cela n'est pas bien sorcier ! Mais bien minimaliste selon que l'on aime Google dans cet aspect-là du Génie...
Note importante: tu ne pourras honnêtement utiliser une GoogleMap qu'avec ta propre API key, laquelle est nécessairement associée à un compte Google ou un siteWeb. Renseignements sur l'API key :
http://code.google.com/intl/fr/apis/maps/signup.html
Remarque: des iframe sont invalides, et demeurent presque impossibles à paramétrer récréativement... C'est pour cela que GoogleMaps rédige désormais comme ceci :
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Control Initialization</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var customUI = map.getDefaultUI();
// Remove MapType.G_HYBRID_MAP
customUI.maptypes.hybrid = false;
map.setUI(customUI);
}
}
//]]>
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 640px; height: 320px"></div>
</body>
</html>
Bonne bûche!
Voilà ! Je conçois que cela t'apparaîtra un peu ardu, mais la première fois seulement...
*NOTE CAPITALE ! de petits malins ont copier-collé mon API key perso, ce qui a bloqué auprès de GoogleMaps ma page en ligne et la rendue non-opérationnelle. J'ai donc été amené à devoir changer cette API key (!), et à publier ici un code ...théorique.
-
"Pas bien joli-malin, Messieurs les Filous-félons-fêlés ! Grand-Frère vous regardent mieux désormais..." Modifié par zebulin (30 Apr 2010 - 22:56)
