{"id":583,"date":"2012-10-14T17:55:05","date_gmt":"2012-10-14T17:55:05","guid":{"rendered":"http:\/\/simonertel.net\/blog\/?p=583"},"modified":"2026-04-25T20:12:18","modified_gmt":"2026-04-25T20:12:18","slug":"initiation-a-google-map-api-v3","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/initiation-a-google-map-api-v3\/","title":{"rendered":"Initiation \u00e0 Google Map API V3"},"content":{"rendered":"

Vous aussi, vous avez probablement eu envie de tripoter l’API de Google pour faire des cartes personnalis\u00e9es !
\nEn tout cas, c’est ce qui m’arrive r\u00e9guli\u00e8rement. C’est suite \u00e0 ce p\u00e9nible constat de devoir toujours refaire les m\u00eames recherches que je vais ici d\u00e9crire les techniques de base pour se plonger dans l’API, avec l’exemple d’une petite application qui permet d’obtenir facilement la longitude et la latitude d’un marker qu’on peut drag’n’dropper sur une carte Google. Exemple ici<\/a>.<\/p>\n

Les pr\u00e9-requis :
\n– Connaissance (au moins superficielles) du JavaScript. On n’utilisera pas de biblioth\u00e8que type jquery dans cet exemple, car inutile.
\n– Connaissance HTLM et du CSS en g\u00e9n\u00e9ral.
\n– Un compte Google.<\/p>\n

Obtention de la cl\u00e9<\/h2>\n

Pour commencer, il va vous falloir obtenir une cl\u00e9<\/strong> qui permettra \u00e0 Google de savoir qui appellera les scripts pour d\u00e9ployer son application, et… vous faire payer au-del\u00e0 d’un certain quota (25 000 requ\u00eates \/ jours). Pour ce faire, rendez-vous sur cette page<\/a>.<\/p>\n

<\/p>\n

Pour retrouver toutes les explications, vous pouvez consulter la page de doc officielle en anglais<\/a>.<\/p>\n

\"D\u00e9marche

D\u00e9marche pour obtenir la cl\u00e9 google map API v3<\/p><\/div>\n

En 1<\/strong><\/span> : Cliquez sur \u00ab\u00a0Service\u00a0\u00bb. Si vous n’avez jamais utilis\u00e9 aucune API de Google auparavant, celui-ci vous demandera de cr\u00e9er un projet (en 0).
\nEn 2 :<\/span><\/span><\/strong> Cherchez parmi le choix des API celle qui nous int\u00e9resse, \u00e0 savoir Google MAP V3, et activez-la en d\u00e9bloquant le loquet associ\u00e9. Notez en passant la limitation de la gratuit\u00e9 \u00e0 25000 requ\u00eates par jour.
\nEn 3<\/strong><\/span> : Cliquez enfin sur \u00ab\u00a0API access\u00a0\u00bb qui vous permettra d’obtenir la cl\u00e9 (4<\/span>)<\/strong> qui va vous \u00eatre utile pour l’appel du script.<\/p>\n

Appel des scripts chez Google !<\/h2>\n

Sur la page HTML, il est venu le moment d’appeler les javascripts n\u00e9cessaires.
\nOn appelle respectivement le script de l’API GG map, et en deux le script sur lequel nous allons \u00e9crire notre script, que vous avez pr\u00e9alablement cr\u00e9\u00e9 (ici \u00ab\u00a0monscript.js\u00a0\u00bb).<\/p>\n

\r\n<!-- Google map --!>\r\n<script type=\"text\/javascript\" src=\"http:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSydghfoprhopegnpFGFDGOegfdxdfg654Gus<\/strong>&sensor<\/strong>=false<\/strong>\"><\/script>\r\n

\r\n<!-- votre script --!>\r\n<script type=\"text\/javascript\" src=\"dossier\/monscript.js\"><\/script>\r\n<\/pre>\n
Notez que pour l’API, vous devez passer en param\u00e8tre la fameuse cl\u00e9<\/strong> pr\u00e9c\u00e9demment r\u00e9cup\u00e9r\u00e9e, et qu’il y a en plus un second param\u00e8tre obligatoire, \u00ab\u00a0sensor\u00a0\u00bb. Celui-ci indique si notre script compte utiliser la g\u00e9olocalisation ou pas. \u00c9tant donn\u00e9 qu’ici ce n’est pas le sujet, nous le mettons \u00e0 false.<\/p>\n
Et apr\u00e8s ?<\/h2>\n
C’est bien beau, mais qu’est-ce qui prouve que cela fonctionne ? Tr\u00e8s bonne question. Nous allons donc d’abord afficher une carte, pour voir s’il n’y a pas d’erreur d\u00e9j\u00e0.
\nPour ce faire, cr\u00e9er un noeud DOM quelconque avec un identifiant (attribut ID) dans votre page :<\/p>\n
\r\n<body>\r\n<div id=\"magooglemap\">\r\n\r\n<\/div>\r\n<\/body>\r\n<\/pre>\n
Ensuite, styler au minimum ce div, afin de lui donner une surface d’affichage. Disons, 600 pixels de large par 400 pixels de haut, par exemple. Dans une feuille de style \u00e0 part ou directement dans la page, l\u00e0 n’est pas le sujet de l’article.<\/p>\n
\r\n#magooglemap{width:600px;height:400px;}\r\n<\/pre>\n
Enfin, en JavaScript, posons les jalons de l’affichage de la carte. Allez sur votre fichier javascript \u00ab\u00a0monscript.js\u00a0\u00bb, puis cr\u00e9ez d’abord la fonction qui permet d’initialiser la carte :<\/p>\n
\r\nfunction initialisation(){\r\n        coordonnees = new google.maps.LatLng(0,0);\r\n\r\tvar optionsCarte = {\r\n\t\tzoom: 5,\r\n\t\tcenter: coordonnees,\r\n\t\tmapTypeId: google.maps.MapTypeId.ROADMAP\r\n\t};\r\n\t\r\n\tmaCarte = new google.maps.Map(document.getElementById(\"magooglemap\"), optionsCarte);\r\n}\r\n<\/pre>\n
Cette fonction cr\u00e9e un objet MAP (‘new google.maps.Map’) auquel on passe en param\u00e8tre respectivement le noeud DOM qu’on a cr\u00e9\u00e9, identifi\u00e9 par son ID (magooglemap), ainsi qu’un objet de variables<\/a> n\u00e9cessaires pour l’initialisation de la carte, contenant son niveau de zoom, par rapport \u00e0 quelles coordonn\u00e9es (tr\u00e8s important, cr\u00e9er une variable contenant l’objet des coordonn\u00e9es). Ici, dans l’exemple, elle est nomm\u00e9e \u00ab\u00a0coordonnees\u00a0\u00bb. Elle est centr\u00e9e (new google.maps.LatLng(0,0)), et son mode de rendu est ici \u00ab\u00a0ROADMAP\u00a0\u00bb.<\/p>\n