J’ai eu l’occasion la semaine derni\u00e8re, de jouer avec l’API Google Maps. R\u00e9cup\u00e9ration de donn\u00e9es en json aupr\u00e8s d’un serveur en lui demandant de filtrer les r\u00e9sultats sur la valeur d’un champ. Je pr\u00e9sente ici, une version simplifi\u00e9e, j’ai plac\u00e9 des donn\u00e9es en dur dans mon fichier .js, quelques gares: Nom, R\u00e9gion, Latitude, Longitude, et je m’arrange pour afficher leur position avec l’API de Google.<\/p>\n
On pr\u00e9pare d’abord la page Html qui va recevoir le tout. On ajoute le JS de l’API:<\/p>\n
<script type=\"text\/javascript\" src=\"http:\/\/maps.googleapis.com\/maps\/api\/js?key=VOTRE_CLE&sensor=false\">\r\n<\/script><\/pre>\nEn rempla\u00e7ant VOTRE_CLE par la cle d’API g\u00e9n\u00e9r\u00e9e par Google.<\/p>\n
On place une balise <div> pour accueillir la map une fois celle-ci g\u00e9n\u00e9r\u00e9e.<\/p>\n
Initialisation de la Google Maps<\/strong><\/p>\n
var mapOptions = {\r\n center: new google.maps.LatLng(47.2, 2),\r\n zoom: 5,\r\n mapTypeId: google.maps.MapTypeId.ROADMAP\r\n};\r\nmap = new google.maps.Map(document.getElementById(\"map_canvas\"),\r\n mapOptions);<\/pre>\nPour cr\u00e9er un marqueur:<\/strong><\/p>\n
var latlng = new google.maps.LatLng(latitude, longitude);\r\nvar marker = new google.maps.Marker({\r\n position: latlng,\r\n title: \"Titre du marqueur\"\r\n});\r\nmarker.setMap(map);<\/pre>\nConcernant la gestion des marqueurs, depuis la derni\u00e8re version de Google Maps, il est n\u00e9cessaire de les g\u00e9rer soit m\u00eame. Il faut donc garder une trace des marqueurs pour pouvoir les supprimer par la suite, si besoin. On stockera les marqueurs dans un tableau.<\/p>\n
var markersArray = [];<\/pre>\nOn ajoute les marqueurs au tableau apr\u00e8s le placement sur la carte.<\/p>\n
markersArray.push(marker);<\/pre>\nLa fonction pour supprimer tous les marqueurs du tableau de la carte et nettoyer la carte est
deleteOverlays()<\/code>.<\/p>\nPour cr\u00e9er une OpenWindow:<\/strong><\/p>\n
var infowindow = new google.maps.InfoWindow({\r\n content: contentString\r\n});\r\n\r\n\/\/Ajout d'un Listener sur le marqueur pour r\u00e9agir en cas de clic\r\ngoogle.maps.event.addListener(marker, 'click', function() {\r\n infowindow.open(map,marker);\r\n});<\/pre>\nObtenir votre cl\u00e9 d’API Google Maps<\/strong>
\nAller sur https:\/\/code.google.com\/apis\/console et se connecter avec son compte Google.
\nCliquer sur Services dans le menu \u00e0 gauche.
\nActiver le service Google Maps API v3.
\nCliquer sur API Access dans le menu \u00e0 gauche.
\nLa cl\u00e9 est visible dans la page API Access, section Simple API Access, celle-ci est indiqu\u00e9 sous le nom de Key for browser apps.<\/p>\nLe code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\" \/>\r\n <link rel=\"stylesheet\" href=\"style.css\" \/>\r\n <title>Gare de France<\/title> \r\n\r\n <script src=\"jquery.js\"><\/script>\r\n <script src=\"getdata.js\"><\/script>\r\n <script type=\"text\/javascript\"\r\n src=\"http:\/\/maps.googleapis.com\/maps\/api\/js?key=VOTRE_CLE&sensor=false\">\r\n <\/script>\r\n <\/head> \r\n\r\n <body>\r\n <div id=\"map_canvas\"><\/div> \r\n\r\n <div id=\"gareTab\">\r\n <h1>Liste de Gares Fran\u00e7aises<\/h1> \r\n\r\n <table><tr> <th>Nom de la gare<\/th> <th>R\u00e9gion<\/th> <th>Latitude<\/th> <th>Longitude<\/th> <\/tr><\/table>\r\n <\/div>\r\n <\/body>\r\n<\/html><\/pre>\nC\u00f4t\u00e9 CSS, on aura:<\/p>\n
html {\r\n height: 100%\r\n}\r\nbody {\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n margin-left: 2em;\r\n margin-top: 2em;\r\n}\r\ntable {\r\n border-collapse: collapse;\r\n}\r\ntd, th {\r\n border: 1px solid black;\r\n padding-left: 5px;\r\n padding-right: 5px;\r\n}\r\n#map_canvas {\r\n display: inline-block;\r\n position: absolute;\r\n margin-top: 6em;\r\n width: 50%;\r\n height: 55%;\r\n left: 45%\r\n }\r\n#gareTab {\r\n position: absolute;\r\n width: 60%;\r\n margin-top: 6em;\r\n }<\/pre>\nEt enfin, passons au c\u00f4t\u00e9 JavaScript proprement dit:<\/p>\n
\/\/Contient tous les marqueurs pr\u00e9sents sur notre carte\r\nvar markersArray = [];\r\n\/\/On retient l'InfoWindow ouverte pour pouvoir la fermer au besoin\r\nvar openedInfoWindow;\r\n\/\/Nos donn\u00e9es\r\nvar data = [\r\n {\r\n \"Nom de la gare\": \"Amiens\",\r\n \"R\u00e9gion\": \"Picardie\",\r\n \"Latitude\": \"49.88993025\",\r\n \"Longitude\": \"2.30981909\"},\r\n {\r\n \"Nom de la gare\": \"Lyon-Part-Dieu\",\r\n \"R\u00e9gion\": \"Rh\u00f4ne-Alpes\",\r\n \"Latitude\": \"45.76032897\",\r\n \"Longitude\": \"4.86050906\"},\r\n {\r\n \"Nom de la gare\": \"Bas-Monistrol\",\r\n \"R\u00e9gion\": \"Auvergne\",\r\n \"Latitude\": \"45.29796638\",\r\n \"Longitude\": \"4.13958253\"},\r\n {\r\n \"Nom de la gare\": \"Strasbourg\",\r\n \"R\u00e9gion\": \"Alsace\",\r\n \"Latitude\": \"48.58496713\",\r\n \"Longitude\": \"7.734584\"}, \r\n\r\n { \"Nom de la gare\": \"Quiberon\",\r\n \"R\u00e9gion\": \"Bretagne\",\r\n \"Latitude\": \"47.48552763\",\r\n \"Longitude\": \"-3.11816733\"},\r\n {\r\n \"Nom de la gare\": \"Carcassonne\",\r\n \"R\u00e9gion\": \"Languedoc-Roussillon\",\r\n \"Latitude\": \"43.21816508\",\r\n \"Longitude\": \"2.35242959\"}\r\n ]; \r\n\r\n\/\/Suppression des marqueurs Google Maps\r\nfunction deleteOverlays() {\r\n if (markersArray) {\r\n for (i in markersArray) {\r\n markersArray[i].setMap(null);\r\n }\r\n markersArray.length = 0;\r\n }\r\n} \r\n\r\n\/\/Suppression du contenu du tableau de gare\r\nfunction deleteTab() {\r\n for(var i = 0; i < $('.ligne').length; ++i) {\r\n $('.ligne').remove();\r\n }\r\n} \r\n\r\n\/\/S'ex\u00e9cute lorsque le document est pr\u00eat\r\nfunction readyFn() { \r\n\r\n \/\/Initialisation de la Google Maps\r\n var mapOptions = {\r\n center: new google.maps.LatLng(47, 2),\r\n zoom: 6,\r\n mapTypeId: google.maps.MapTypeId.ROADMAP\r\n }; \r\n\r\n map = new google.maps.Map(document.getElementById(\"map_canvas\"),\r\n mapOptions); \r\n\r\n \/\/Suppression de tout ce qui pourrait pr\u00e9exister\r\n deleteOverlays();\r\n deleteTab(); \r\n\r\n var tab = [];\/\/On construit le contenu du tableau HTML dans tab\r\n data.forEach(function(element, index, array) {\r\n \/\/Construction d'une ligne du tableau\r\n tab.push('<tr><td> ' +\r\n element[\"Nom de la gare\"] + ' <\/td><td>' +\r\n element[\"R\u00e9gion\"] + ' <\/td><td> ' +\r\n element[\"Latitude\"] + ' <\/td><td> ' +\r\n element[\"Longitude\"] + ' <\/td><\/tr>'\r\n ); \r\n\r\n \/\/Construction du marqueur Google Maps\r\n var latlng = new google.maps.LatLng(element[\"Latitude\"], element[\"Longitude\"]);\r\n var marker = new google.maps.Marker({\r\n position: latlng,\r\n title: element[\"Nom de la gare\"]\r\n });\r\n marker.setMap(map);\/\/Ajout du marqueur \u00e0 la carte\r\n markersArray.push(marker); \r\n\r\n \/\/Ajout d'une InfoWindow pour chaque marqueur\r\n \/\/Ce qui s'affichera:\r\n var contentString = '<b>' + element[\"Nom de la gare\"]\r\n + '<\/b><br \/>' + element[\"R\u00e9gion\"]\r\n + '<br \/>Latitude: ' + element[\"Latitude\"]\r\n + '<br \/>Longitude: ' + element[\"Longitude\"]; \r\n\r\n \/\/Cr\u00e9ation des fen\u00eatres d'info (ou InfoWindow)\r\n var infowindow = new google.maps.InfoWindow({\r\n content: contentString\r\n }); \r\n\r\n \/\/Ajout d'un Listener sur le marqueur pour r\u00e9agir en cas de clic\r\n google.maps.event.addListener(marker, 'click', function() {\r\n if(openedInfoWindow != undefined) {\/\/Au cas o\u00f9 il n'y a pas d'info window \u00e0 fermer\r\n openedInfoWindow.close();\r\n }\r\n infowindow.open(map,marker);\r\n openedInfoWindow = infowindow;\r\n });\r\n }); \r\n\r\n \/\/concat\u00e9nation du tableau en string et ajout dans la balise table\r\n $('table').append(tab.join(''));\r\n} \r\n\r\n$(document).ready(readyFn);<\/pre>\n<\/p>\n
Pour tout savoir sur l’API Google Maps, je vous conseille la doc de Google qui est tr\u00e8s claire et d\u00e9taill\u00e9e:
\nhttps:\/\/developers.google.com\/maps\/documentation\/javascript\/tutorial<\/a><\/p>\nPour le zip contenant les fichiers ci-dessus, c’est par ici:<\/p>\n
GareOnGoogleMaps<\/a><\/p>\n
Maj 25.03.2013:<\/strong> En fait, il n’est pas n\u00e9cessaire de g\u00e9n\u00e9rer une cl\u00e9 d’API pour pouvoir utiliser la Google Maps. Il suffit simplement d’utiliser l’url suivante http:\/\/maps.googleapis.com\/maps\/api\/js?&sensor=false<\/em> correspondant \u00e0 l’adresse utilis\u00e9e dans cette exemple sans le param\u00e8tre key<\/em>. Ajout du zip comprenant les sources.<\/p>\n","protected":false},"excerpt":{"rendered":"
J’ai eu l’occasion la semaine derni\u00e8re, de jouer avec l’API Google Maps. R\u00e9cup\u00e9ration de donn\u00e9es en json aupr\u00e8s d’un serveur en lui demandant de filtrer les r\u00e9sultats sur la valeur d’un champ. Je pr\u00e9sente ici, une version simplifi\u00e9e, j’ai plac\u00e9 des donn\u00e9es en dur dans mon fichier .js, quelques gares: Nom, R\u00e9gion, Latitude, Longitude, et … Continuer la lecture de « API Google Maps »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[13],"class_list":["post-451","post","type-post","status-publish","format-standard","hentry","category-code","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=451"}],"version-history":[{"count":10,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions"}],"predecessor-version":[{"id":2338,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=\/wp\/v2\/posts\/451\/revisions\/2338"}],"wp:attachment":[{"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unicoda.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}