Google Maps API
Pour commencer
Obtenir une clé pour Google Maps
API
Insérer la référence à l'
API dans le code du site :
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxxxxxxxxx" type="text/javascript"></script>
JavaScript Maps API Example
...
// Note: you will need to replace the sensor parameter below with either an explicit true or false value.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAAu0eQm4X2i_uC0W1ELa1I6RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT8LFWv2rL8qEO0VgnsAtJZlLvIxA" type="text/javascript"></script>
...
Maps API for Flash Example
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
key="ABQIAAAAu0eQm4X2i_uC0W1ELa1I6RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT8LFWv2rL8qEO0VgnsAtJZlLvIxA"/>
HTTP Service Example
http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=json&oe=utf8\
&sensor=true_or_false&key=ABQIAAAAu0eQm4X2i_uC0W1ELa1I6RT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT8LFWv2rL8qEO0VgnsAtJZlLvIxA
Options
Contrôles de Zoom
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
Type de carte
map.setMapType(G_NORMAL_MAP);
map.setMapType(G_SATELLITE_MAP);
map.setMapType(G_HYBRID_MAP);
Simple carte
<body>
<div id="map" style="width: 500px; height: 400px"></div>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
//zoom levels 0-17+, 0 == world
map.setCenter(new GLatLng(39.754286, -104.994637), 16);
</script>
</body>
Avec bulle
var map = new GMap2(document.getElementById("map"));
var etsPoint = new GLatLng(45.495327, -73.563101);
map.setCenter(etsPoint, 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setMapType(G_NORMAL_MAP);
//create marker, add to map overlay
var etsMarker = new GMarker(etsPoint);
map.addOverlay(etsMarker);
//create Info Window (html)
var etsHtml = '<b>École de technologie supérieure</b>,<br /> endroit où il faut travailler fort.';
etsMarker.openInfoWindowHtml(etsHtml);
Utilisation d'un fichier KML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
<Document>
<name>microbrasseries.kml</name>
<Placemark>
<name>L'amère à boire</name>
<description>Il faut essayer la Cerna Hora, lager d'inspiration tchèque.</description>
<Point>
<coordinates>-73.566009,45.516284</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Dieu du Ciel !</name>
<description>Péché Mortel, la meilleure bière du pays, Aphrodisiaque, Route des épices, trop de bonnes bières !</description>
<Point>
<coordinates>-73.593389,45.522599</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Le Saint-Bock</name>
<description>La RIP et la Sacrilège sont à essayer.</description>
<Point>
<coordinates>-73.563329,45.515063</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Le Broue Pub Brouhaha</name>
<description>Le Broue Pub Brouhaha</description>
<Point>
<coordinates>-73.588382,45.542595</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Nommer le fichier (ex : microbrasseries.kml
)
Rendre le fichier public, sur un serveur
Et entrer l'adresse du fichier dans Google Maps
Sources
-
-
Andre Lewis, Michael Purvis, Jeffrey Sambells, and Cameron Turner, Beginning Google Maps Applications with Rails and Ajax, Apress 2007.
Ressources
Documentation Google
En Java
En JavaScript