Ci-dessous votre premier script affichant une carte Google Maps.
<html>
<head>
<title>Application Google Maps : Ma première carte</title>
<!-- Ligne de javascript qui passe votre clé Google Maps -->
<!-- C'est cette clé que vous devrez personnaliser en fonction de votre nom de domaine -->
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
type="text/javascript"></script>
<!-- Javascript minimaliste créant votre carte -->
<script type="text/javascript">//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.85929404029, 2.341461181640), 12);
}
}
//]]></script>
</head>
<!-- Au moment où la page se télécharge la fonction "load()" charge la carte -->
<body onload="load()" onunload="GUnload()">
<!-- "map" est l'identifiant du calque qui recevra la carte -->
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Avant votre premier essai de carte Google Maps, vous devez vous procurer votre clé Google Maps.
Voyez sur la page Introduction la méthode d'obtention de votre clé Google Maps.
Notez qu'une clé Google Maps ne correspond qu'à un seul nom de domaine (URL) !!!! Pour faire votre premier essai, faites un copier/coller du contenu du cadre ci-dessus dans une page vierge de votre Notepad (bloc note). Remplacez la clé par la vôtre. Sauvez-le en lui donnant une extention ".html" ou "htm". Téléchargez le fichier vers votre hébergement et visualisez le résultat. Explications :
Sous la ligne "title" vous trouverez le javascript contenant la clé Google Maps. Juste en-dessous la fonction "load().
Cette fonction "load()" par "if (GBrowserIsCompatible())" vérifie la compatibilité du navigateur.
Les deux lignes suivantes du script ont pour fonction :
- "map = new GMap2(...." initialise l'objet carte
- "map.setCenter(new GLatLng(COODONNÉES DU CENTRE), VALEUR DU ZOOM);"
Ajoute les propriétés "centre" et "zoom" à la carte "map" "<body onload="load()"...", au chargement de la page, charge la fonction "load()". "<div id="map" style="width: 500px; height: 300px"></div>", est le calque "map" qui contiendra la carte Google Maps. C'est ici aussi, que vous allez déterminer la dimmention de la carte avec la valeur des attributs "width" et "height". Résultat :
Ci-dessous votre premier script affichant une carte Google Maps.