COMMENT OBTENIR UNE CLE API GOOGLE MAPS

PRESENTATION

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 :

- insérer des cartes, contrôler leur apparence (Zoom, Types de carte : Plan - Satellite - Mixte),

- ajouter des composants (Marqueurs, Fenêtres, Polygone, Lignes, etc..),

- et créer des comportements particuliers contrôlés par la souris et/ou le clavier.

COMMENT OBTENIR UNE CLE API GOOGLE MAPS ?

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.

Formulaire pour obtenir une clé API Google Maps

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) :

Thank you for signing up for a Google Maps API key!

Your key is:

ABQIAAAATndsWAV5Q2y7pRRi-22W_hRwYncLLHuV3JE0kIegIWskyWT9ihTBk7PriX1W-UU_X1389btMTX8WMA

This key is good for all URLs in this directory:

http://www.monsite.com/

COMMENT L'UTILISER ?

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) :

Here is an example web page to get you started on your way to mapping glory:

<!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>Google Maps JavaScript API Example</title>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATndsWAV5Q2y7pRRi-22W_hRwYncLLHuV3JE0kIegIWskyWT9ihTBk7PriX1W-UU_X1389btMTX8WMA" type="text/javascript"></script>
	<script type="text/javascript">
		//<![CDATA[
			function load() {
				if (GBrowserIsCompatible()) {
					var map = new GMap2(document.getElementById("map"));
					map.setCenter(new GLatLng(37.4419, -122.1419), 13);
				}
			}
		//]]>
	</script>
</head>

<body onload="load()" onunload="GUnload()">
	<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Comme dans l'exemple ci-dessus cette clé doit être insérée entre les balises <head> </head> .

sous cette forme :

Vous remplacez Clef_API_Ici par votre propre clé API, soit dans notre exemple :

ABQIAAAATndsWAV5Q2y7pRRi-22W_hRwYncLLHuV3JE0kIegIWskyWT9ihTBk7PriX1W-UU_X1389btMTX8WMA

LES ERREURS LIEES A UNE MAUVAISE UTILISATION DE LA CLE API GOOGLE MAPS

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 :

Message d'erreur si la clé API Google Maps est erronée