Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
L'API de Google Maps vous permet de mettre en place des applications Ajax interagissant directement avec les cartes proposées par Google Maps.
Ainsi, au sein de vos pages web, vous allez pouvoir :
Pour vous servir de cet API, il vous faut, dans un premier temps, obtenir une cle API Google Maps, en vous rendant à l'adresse suivante : http://www.google.com/apis/maps/signup.html
En bas de la page vous trouverez un formulaire dont l'aspect est identique à l'image ci-dessous.
Saisissez l'adresse du site sur lequel vous souhaitez utiliser Google Maps ( Par exemple : http://www.monsite.com ) , puis cliquez sur le bouton "Generate API Key".
Vous allez être dirigé vers la page d'accueil "Google Comptes". Identifiez-vous, ou créez un compte si vous n'en possédez pas encore.
Google va alors générer une clé qui vous est spécialement dédiée. Elle se présente sous la forme d'une longue suite de caractères alphanumériques :
Exemple (Extrait de la page) :
En même temps qu'il vous fournit votre clé API, Google vous fournit un exemple basique de ce que vous pouvez dès à présent faire avec votre nouvelle clé :
Exemple (Extrait de la page) :
Comme dans l'exemple ci-dessus, cette clé doit être insérée entre les balises <head> </head>.
sous cette forme :
<script src="http://maps.google.com/maps?file=api&v=2&key=Mettez_Votre_Clef_API_Ici" type="text/javascript"></script>
Vous remplacez Mettez_Votre_Clef_API_Ici par votre propre clé API, soit dans notre exemple :
ABQIAAAATndsWAV5Q2y7pRRi-22W_hTpJCQAzjbqupqyW-0uw2zccgAFFxR2qEg6PVQIeyLVOfBOHgj4KA7c0Q
<?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>
<title>TouraineVerte Obtenir une clé API Google Maps</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Supprimer la ligne ci-dessous une fois votre clé API Google Maps générée */
alert("Utilisez :\r\n\r\nalert(window.location.host);\r\n\r\nafin de connaitre le nom de domaine à utiliser pour générer la clé API Google Maps :\r\n\r\nRésultat : \r\n\r\n" + window.location.host);
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
function initialize() {
if (google.maps.BrowserIsCompatible()) {
var maCarte= new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}
}
google.setOnLoadCallback(initialize);
//]]>
</script>
</head>
<body>
<div id="EmplacementDeMaCarte" style="width:100%;height:400px"></div>
</body>
</html>
<?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 Obtenir une clé API Google Maps</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=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Supprimer la ligne ci-dessous une fois votre clé API Google Maps générée */
alert("Utilisez :\r\n\r\nalert(window.location.host);\r\n\r\nafin de connaitre le nom de domaine à utiliser pour générer la clé API Google Maps :\r\n\r\nRésultat : \r\n\r\n" + window.location.host);
function load() {
if (GBrowserIsCompatible()) {
var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
maCarte.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="EmplacementDeMaCarte" style="width:100%;height:400px"></div>
</body>
</html>
Pour obtenir une clé API Google Maps, vous devez vous connecter à votre compte Google et accepter les conditions. Pour un seul compte Google, vous pouvez obtenir autant de clef API Google Maps, que vous avez de domaines.
Par exemple, si vous vous inscrivez pour le domaine http://www.mondomaine.fr/, votre clé est valable pour :
Par contre, cette clé ne sera pas valable pour :
Au cours du développement de votre site, la vérification de la clé API Google est ignorée lorsque le fichier est lu depuis votre ordinateur.
Par contre, si vous développez depuis localhost (exemple : tests effectués depuis http://localhost/ avec EasyPhp, WampServer, XAMPP, etc.), vous devez vous inscrire pour le domaine http://localhost/.
Si vous utilisez l'API Google Maps dans sa version Javascript et que la clé API Google Maps utilisée dans votre site déclenche une erreur, copiez-collez le code ci-dessous dans une page nommée par exemple testdomaine.htm puis tranférez la sur votre serveur :
<html> <head> <title>Astuce TouraineVerte.com pour connaitre le domaine à indiquer pour obtenir une clé API valide</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript">
<!-- alert("Le domaine à utiliser pour obtenir une clé API valide est : \r\n\r\n"+window.location.host); //-->
</script> </head> <body> </body> </html>
Depuis votre navigateur affichez votre page http://www.mondomaine.fr/testdomaine.htm.
Le nom de domaine qui s'affichera dans la fenêtre d'alerte, correspond à celui que vous devez utiliser pour générer votre clé API Google Maps.
Encore plus d'infos dans la FAQ : How does the Maps APIs key system work ?
Attention :
Dans les exemples qui vont suivre, n'oubliez pas de remplacer la clé API de l'exemple par votre propre clé API fournie par Google Maps.
Si votre clé API a mal été recopiée, ou qu'elle est déjà utilisée par un autre site, vous ne pourrez pas afficher de carte, et Google Maps vous renverra le message d'erreur suivant :
