Google Maps, JavaScript, API – Notions de base de la Google Maps JavaScript API et une approche sur le datajournalisme

Il existe de très nombreux usages possibles de l’API Google Maps afin de faire des cartes personnalisés notamment. Le plus étourdissant dans cette personnalisation est, à notre avis de lier, la quantité des références à la personnalisation des marqueurs en terme d’affichage. Idéalement, en créant dynamiquement un fichier json contenant toutes les informations nécessaires à l’affichage des marqueurs personnalisés, vous pouvez créer un aperçu d’informations géolocalisées tout à fait intéressant, ce qui vous fera toucher du doigt, les expérimentations de datajournalisme à l’instar de ces exemples :

Une conférence s’est d’ailleurs à Paris, très récemment, Voir News2012 | #HacktheNewsroom où il a été sans beaucoup question de datajournalisme.

Dans une catégorie, plus ludique que journalistique, c’est exactement ce principe que nous avons appliqué lors de la création de cette carte du style pour le site de Treets Looks, qui permet de visualiser tous les vidéos de street styles vidéo sur une carte du monde.

Tout ces interaction sont rendus possible grâce l’API JavaScript de Google Map. Cette API Javascript est piloté par les événements dans le navigateur, ce qui signifie que l’API Javascript répond à des interactions en générant des événements.
C’est là aussi les principes en action que nous avons poussé très loin avec l’API 3WDOC, elle aussi en javascript mais revenons à notre article.

Le jeu des capitales

On va placer ces 11 capitales européennes sur une carte google à l’aide des coordonnées longitude et latitude. Cela donne à la création d’un fichier json de ce type.

Paris – Latitude : 48.8578058 – Longitude : 2.29463
Berlin – Latitude : 52.519171 – Longitude : 13.4060912
Madrid – Latitude : 40.4166909 – Longitude : -3.7003454
Athènes – Latitude : 37.9753357 – Longitude : 23.7361497
Rome – Latitude : 41.8905198 – Longitude : 12.4942486
Londres – Latitude : 51.5081289 – Longitude : -0.128005
Lisbonne – Latitude : 38.706932 – Longitude : -9.1356321
Varsovie – Latitude : 52.2296756 – Longitude : 21.0122287
Prague – Latitude : 50.0878114 – Longitude : 14.4204598
Budapest – Latitude : 47.4984056 – Longitude : 19.0407578
Copenhague – Latitude : 55.6760968 – Longitude : 12.5683371

Le fichier json de source le_jeu_des_capitales.json

	{"markers": [
		{"lat":48.8578058, "lng":2.29463, "html":"Paris - Latitude : 48.8578058 - Longitude : 2.29463"},
		{"lat":52.519171, "lng":13.4060912, "html":"Berlin - Latitude : 52.519171 - Longitude : 13.4060912"},
		{"lat":40.4166909, "lng":-3.7003454, "html":"Madrid - Latitude : 40.4166909 - Longitude : -3.7003454"},
		{"lat":37.9753357, "lng":23.7361497, "html":"Athènes - Latitude : 37.9753357 - Longitude : 23.7361497"},
		{"lat":37.9753357, "lng":23.7361497, "html":"Athènes - Latitude : 37.9753357 - Longitude : 23.7361497"},
		{"lat":41.8905198, "lng":12.4942486, "html":"Rome - Latitude : 41.8905198 - Longitude : 12.4942486"},
		{"lat":51.5081289, "lng":-0.128005, "html":"Londres - Latitude : 51.5081289 - Longitude : -0.128005"},
		{"lat":38.706932, "lng":-9.1356321, "html":"Lisbonne - Latitude : 38.706932 - Longitude : -9.1356321"},
		{"lat":52.2296756, "lng":21.0122287, "html":"Varsovie - Latitude : 52.2296756 - Longitude : 21.0122287"},
		{"lat":50.0878114, "lng":14.4204598, "html":"Prague - Latitude : 50.0878114 - Longitude : 14.4204598"},
		{"lat":47.4984056, "lng":19.0407578, "html":"Budapest - Latitude : 47.4984056 - Longitude : 19.0407578"},
		{"lat":55.6760968, "lng":12.5683371, "html":"Copenhague - Latitude : 55.6760968 - Longitude : 12.5683371"}
 
	   ]
	}

Le fichier HTML qui va nous permettre de charger l’ensemble le_jeu_des_capitales.html

 
	<!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>le_jeu_des_capitales</title>
	    <script src="http://maps.google.com/maps?file=api" type="text/javascript"></script>
 
 
	<script type="text/javascript">
 
 
	    //<![CDATA[
	    var map;
 
	function createMarker(point,html) {
		var marker = new GMarker(point);
	      GEvent.addListener(marker, "click", function() {
	        marker.openInfoWindowHtml(html);
	      });
	      return marker;
	    }
 
	    setup_json = function(json, status) {
	      var data = eval(&#x27;(&#x27; + json + &#x27;)&#x27;);
 
	      for (var i=0; i<data.markers.length; i++) {
	        var point = new GLatLng(data.markers[i].lat, data.markers[i].lng);
	        var marker = createMarker(point, data.markers[i].html);
	        map.addOverlay(marker);
	      }
	    }
 
	    function load() {
	      if (GBrowserIsCompatible()) {
	        map = new GMap2(document.getElementById("map"));
	        map.addControl(new GLargeMapControl());
	        map.addControl(new GMapTypeControl());
	        map.setCenter(new GLatLng(46.85, 1.75), 4);
 
	        GDownloadUrl("le_jeu_des_capitales.json", setup_json);
	      } else {
	        alert("D&eacute;sol&eacute;, l&#x27;API Google Maps n&#x27;est pas compatible avec votre navigateur.");
	      }
	    }
 
	    //]]>
	    </script>
	  </head>
 
	  <body onload="load()" onunload="GUnload()">
 
				<div id="map" style="width: 650px; height: 650px"></div>
 
	  </body>
	</html>

Source : http://www.numabilis.com/

Le rendu du fichier HTML le_jeu_des_capitales.html