json<\/code> contenant toutes les informations n\u00e9cessaires \u00e0 l’affichage des marqueurs personnalis\u00e9s, vous pouvez cr\u00e9er un aper\u00e7u d’informations g\u00e9olocalis\u00e9es tout \u00e0 fait int\u00e9ressant, ce qui vous fera toucher du doigt, les exp\u00e9rimentations de datajournalisme<\/code> \u00e0 l’instar de ces exemples :<\/p>\n\n- WikiLeaks Iraq war logs \u2013 every death mapped<\/a><\/li>\n
- Texas Tribune – Census 2010 interactive map \u2013 Texas population by race, hispanic origin<\/a><\/li>\n<\/ul>\n
Une conf\u00e9rence s’est d’ailleurs \u00e0 Paris, tr\u00e8s r\u00e9cemment, Voir News2012 | #HacktheNewsroom<\/a> o\u00f9 il a \u00e9t\u00e9 sans beaucoup question de datajournalisme.<\/b><\/p>\nDans une cat\u00e9gorie, plus ludique que journalistique, c’est exactement ce principe que nous avons appliqu\u00e9 lors de la cr\u00e9ation de cette carte du style pour le site de Treets Looks, qui permet de visualiser tous les vid\u00e9os de street styles vid\u00e9o sur une carte du monde<\/a>.<\/p>\nTout ces interaction sont rendus possible gr\u00e2ce l’API JavaScript de Google Map. Cette API Javascript est pilot\u00e9 par les \u00e9v\u00e9nements dans le navigateur, ce qui signifie que l’API Javascript r\u00e9pond \u00e0 des interactions en g\u00e9n\u00e9rant des \u00e9v\u00e9nements.
\nC’est l\u00e0 aussi les principes en action que nous avons pouss\u00e9 tr\u00e8s loin avec l’API 3WDOC<\/a>, elle aussi en javascript mais revenons \u00e0 notre article.<\/p>\nLe jeu des capitales<\/h2>\n
On va placer ces 11 capitales europ\u00e9ennes sur une carte google \u00e0 l’aide des coordonn\u00e9es longitude et latitude. Cela donne \u00e0 la cr\u00e9ation d’un fichier json<\/code> de ce type.<\/p>\n\n- Paris – Latitude : 48.8578058 – Longitude : 2.29463<\/li>\n
- Berlin – Latitude : 52.519171 – Longitude : 13.4060912<\/li>\n
- Madrid – Latitude : 40.4166909 – Longitude : -3.7003454<\/li>\n
- Ath\u00e8nes – Latitude : 37.9753357 – Longitude : 23.7361497<\/li>\n
- Rome – Latitude : 41.8905198 – Longitude : 12.4942486<\/li>\n
- Londres – Latitude : 51.5081289 – Longitude : -0.128005<\/li>\n
- Lisbonne – Latitude : 38.706932 – Longitude : -9.1356321<\/li>\n
- Varsovie – Latitude : 52.2296756 – Longitude : 21.0122287<\/li>\n
- Prague – Latitude : 50.0878114 – Longitude : 14.4204598<\/li>\n
- Budapest – Latitude : 47.4984056 – Longitude : 19.0407578<\/li>\n
- Copenhague – Latitude : 55.6760968 – Longitude : 12.5683371<\/li>\n<\/ul>\n
Le fichier json de source le_jeu_des_capitales.json<\/code><\/b><\/p>\n\r\n\t{\"markers\": [\r\n\t\t{\"lat\":48.8578058, \"lng\":2.29463, \"html\":\"Paris - Latitude : 48.8578058 - Longitude : 2.29463\"},\r\n\t\t{\"lat\":52.519171, \"lng\":13.4060912, \"html\":\"Berlin - Latitude : 52.519171 - Longitude : 13.4060912\"},\r\n\t\t{\"lat\":40.4166909, \"lng\":-3.7003454, \"html\":\"Madrid - Latitude : 40.4166909 - Longitude : -3.7003454\"},\r\n\t\t{\"lat\":37.9753357, \"lng\":23.7361497, \"html\":\"Ath\u00e8nes - Latitude : 37.9753357 - Longitude : 23.7361497\"},\r\n\t\t{\"lat\":37.9753357, \"lng\":23.7361497, \"html\":\"Ath\u00e8nes - Latitude : 37.9753357 - Longitude : 23.7361497\"},\r\n\t\t{\"lat\":41.8905198, \"lng\":12.4942486, \"html\":\"Rome - Latitude : 41.8905198 - Longitude : 12.4942486\"},\r\n\t\t{\"lat\":51.5081289, \"lng\":-0.128005, \"html\":\"Londres - Latitude : 51.5081289 - Longitude : -0.128005\"},\r\n\t\t{\"lat\":38.706932, \"lng\":-9.1356321, \"html\":\"Lisbonne - Latitude : 38.706932 - Longitude : -9.1356321\"},\r\n\t\t{\"lat\":52.2296756, \"lng\":21.0122287, \"html\":\"Varsovie - Latitude : 52.2296756 - Longitude : 21.0122287\"},\r\n\t\t{\"lat\":50.0878114, \"lng\":14.4204598, \"html\":\"Prague - Latitude : 50.0878114 - Longitude : 14.4204598\"},\r\n\t\t{\"lat\":47.4984056, \"lng\":19.0407578, \"html\":\"Budapest - Latitude : 47.4984056 - Longitude : 19.0407578\"},\r\n\t\t{\"lat\":55.6760968, \"lng\":12.5683371, \"html\":\"Copenhague - Latitude : 55.6760968 - Longitude : 12.5683371\"}\r\n\r\n\t ]\r\n\t}\r\n<\/pre>\nLe fichier HTML qui va nous permettre de charger l’ensemble le_jeu_des_capitales.html<\/code><\/b><\/p>\n\r\n\t\r\n\t<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\"\r\n\t \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\r\n\t<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n\t <head>\r\n\t <meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\"\/>\r\n\t <title>le_jeu_des_capitales<\/title>\r\n\t <script src=\"http:\/\/maps.google.com\/maps?file=api\" type=\"text\/javascript\"><\/script>\r\n\r\n\r\n\t<script type=\"text\/javascript\">\r\n\r\n\r\n\t \/\/<![CDATA[\r\n\t var map;\r\n\r\n\tfunction createMarker(point,html) {\r\n\t\tvar marker = new GMarker(point);\r\n\t GEvent.addListener(marker, \"click\", function() {\r\n\t marker.openInfoWindowHtml(html);\r\n\t });\r\n\t return marker;\r\n\t }\r\n\r\n\t setup_json = function(json, status) {\r\n\t var data = eval('(' + json + ')');\r\n\r\n\t for (var i=0; i<data.markers.length; i++) {\r\n\t var point = new GLatLng(data.markers[i].lat, data.markers[i].lng);\r\n\t var marker = createMarker(point, data.markers[i].html);\r\n\t map.addOverlay(marker);\r\n\t }\r\n\t }\r\n\r\n\t function load() {\r\n\t if (GBrowserIsCompatible()) {\r\n\t map = new GMap2(document.getElementById(\"map\"));\r\n\t map.addControl(new GLargeMapControl());\r\n\t map.addControl(new GMapTypeControl());\r\n\t map.setCenter(new GLatLng(46.85, 1.75), 4);\r\n\r\n\t GDownloadUrl(\"le_jeu_des_capitales.json\", setup_json);\r\n\t } else {\r\n\t alert(\"Désolé, l'API Google Maps n'est pas compatible avec votre navigateur.\");\r\n\t }\r\n\t }\r\n\r\n\t \/\/]]>\r\n\t <\/script>\r\n\t <\/head>\r\n\r\n\t <body onload=\"load()\" onunload=\"GUnload()\">\r\n\r\n\t\t\t\t<div id=\"map\" style=\"width: 650px; height: 650px\"><\/div>\r\n\r\n\t <\/body>\r\n\t<\/html>\r\n<\/pre>\nSource : http:\/\/www.numabilis.com\/<\/a><\/i><\/p>\nLe rendu du fichier HTML le_jeu_des_capitales.html<\/code><\/b><\/p>\n![\"Google](\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/06\/google_map_usage_1.jpg\")
<\/p>\n
En savoir plus<\/h2>\n\n- Events – Google Maps JavaScript API v3
http:\/\/code.google.com\/intl\/fr\/apis\/maps\/documentation\/javascript\/events.html<\/a><\/li>\n- Google Maps JavaScript API v3 Example: Event Closure
http:\/\/code.google.com\/intl\/fr\/apis\/maps\/documentation\/javascript\/examples\/event-closure.html<\/a><\/li>\n- Google Maps JavaScript API v3 Example: Complex Icons
https:\/\/google-developers.appspot.com\/maps\/documentation\/javascript\/examples\/icon-complex?hl=fr<\/a><\/li>\n- Random Markers
http:\/\/gmaps-samples-v3.googlecode.com\/svn\/trunk\/sidebar\/random-markers.html<\/a><\/li>\n- Google Maps JavaScript API v3 Example: Info Window Custom
http:\/\/gmaps-samples-v3.googlecode.com\/svn\/trunk\/infowindow_custom\/infowindow-custom.html<\/a><\/li>\n- Google Maps API : affichage des donn\u00e9es d’un fichier JSON
http:\/\/www.numabilis.com\/index.php?post\/2007-07-07-google_maps_api_affichage_des_donnees_dun_fichier_json<\/a><\/li>\n- google-maps-utility-library-v3
http:\/\/google-maps-utility-library-v3.googlecode.com\/svn\/trunk\/markerclusterer\/examples\/speed_test_example.html<\/a><\/li>\n- google-maps-utility-library-v3
http:\/\/www.mosne.it\/playground\/mosne_map\/<\/a><\/li>\n- MarkerClusterer: A Solution to the Too Many Markers Problem
http:\/\/googlegeodevelopers.blogspot.fr\/2009\/04\/markerclusterer-solution-to-too-many.html<\/a><\/li>\n- R\u00e9cup\u00e9rer les coordonn\u00e9es d\u2019une adresse avec google map
http:\/\/www.weboblog.fr\/recuperer-les-coordonnees-dune-adresse<\/a><\/li>\n- The Data Journalism Handbook – Some Favorite Examples
http:\/\/datajournalismhandbook.org\/1.0\/en\/introduction_3.html<\/a><\/li>\n- Five great examples of data journalism using Google Fusion Tables
http:\/\/blogs.journalism.co.uk\/2011\/05\/20\/five-great-examples-of-data-journalism-using-google-fusion-tables\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Il existe de tr\u00e8s nombreux usages possibles de l’API Google Maps afin de faire des cartes personnalis\u00e9s notamment. Le plus \u00e9tourdissant dans cette personnalisation est,… <\/p>\n