FR:Google Maps Example
Les exemples sur cette page montrent comment intégrer les tuiles (couches cartographiques) OpenStreetMap en tant que couche cartographique dans une carte Google Map (c'est-à-dire en utilisant la bibliothèque javascript google maps pour l'affichage de la carte, mais en affichant les tuiles de la carte OpenStreetMap).
C'est l'une des nombreuses approches pour déployer votre propre carte Slippy Map. De nombreux développeurs travaillant avec OpenStreetMap préfèreront utiliser Leaflet ou OpenLayers, parce qu'ils sont plus en accord avec l'éthique d'OSM, mais il existe de nombreuses raisons pour lesquelles vous pourriez vouloir ou devrez utiliser la librairie javascript de google maps. Par exemple, vous avez peut-être beaucoup investi (en temps et argent) dans la construction d'une interface google maps (la logique ou algorithme dans le code pour afficher des superpositions, la gestion des clics, etc.) Dans ce cas, il est encore assez simple de juste échanger Google Maps par OpenStreetMap en tant que fournisseur de tuiles (couches) cartographiques ou de le proposer comme une des possibles couches cartographique de base dans votre application (site web ou application de téléphonie mobile).
Exemple utilisant l'API V3 de Google Maps
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Google Maps v3 API Example</title>
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
div#footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 18px;
margin: 0;
padding: 6px;
z-index: 2;
background: WHITE;
}
</style>
</head>
<body>
<div id="map" style="float: left;"></div>
<div id="footer">© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors</div>
<!-- bring in the google maps library -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//Google maps API initialisation
var element = document.getElementById("map");
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(57, 21),
zoom: 3,
mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: false
});
//Define OSM map type pointing at the OpenStreetMap tile server
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
// NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe+x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
</script>
</body>
</html>
Voyez-le en en fonctionnement ici
Exemple - Utilisant l'API V3 de Google Maps avec comme paramétrage OSM pour la couche cartographique de base
Cette exemple ajoute OpenStreetMap comme couche cartographique de base pour la librairie Google Maps. Notez que vous avez besoin de de définir/paramétrer la variable maxZoom dans la variable ImageMapType pour le faire fonctionner comme couche cartographique de base. Le tag (marque) meta spécifique à Apple active le fonctionnement en plein écran quand il est lancé en tant qu'application web sur un appareil de type iPhone our iPad.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OpenStreetMap with Google Maps v3 API</title>
<style type="text/css">
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var element = document.getElementById("map");
/*
Build list of map types.
You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
but static lists sucks when google updates the default list of map types.
*/
var mapTypeIds = [];
for(var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
mapTypeIds.push("OSM");
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
zoom: 11,
mapTypeId: "OSM",
mapTypeControlOptions: {
mapTypeIds: mapTypeIds
}
});
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// See above example if you need smooth wrapping at 180th meridian
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
</script>
</body>
</html>
Exemple utilisant l'API V2 de Google Maps (marquée comme obsolète (Deprecated) par Google )
<!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>
<title>OpenStreetMap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load()
{
if (!GBrowserIsCompatible())
return;
var copyOSM = new GCopyrightCollection("<a href=\"http://www.openstreetmap.org/\">OpenStreetMap</a>");
copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, " "));
var tilesMapnik = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
var tilesOsmarender = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tah.openstreetmap.org/Tiles/tile/{Z}/{X}/{Y}.png'});
var mapMapnik = new GMapType([tilesMapnik], G_NORMAL_MAP.getProjection(), "Mapnik");
var mapOsmarender = new GMapType([tilesOsmarender], G_NORMAL_MAP.getProjection(), "Osmarend");
var map = new GMap2(document.getElementById("map"), { mapTypes: [mapMapnik, mapOsmarender] });
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter( new GLatLng(55.95, -3.19), 13);
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 600px; height: 600px; border:1px solid gray;"></div>
</body>
</html>
Notes
Avant d'intégrer cette carte (V2) dans une page Web, vous devrez remplacer le texte YOUR_KEY_HERE avec votre clé (key) de l'API Google Maps. Cet élément peut être obtenu sur cette page web.
Google maps via Mapstraction
Mapstraction est une bibliothèque javascript fournissant une couche d'abstraction au travers de bibliothèques cartographiques en JavaScript. Google maps est supporté et peut être invoqué avec les tuiles cartographiques. Cela signifie que vous ne codez pas contre l'API de google maps, mais plutôt à l'aide de l'API mapstraction, mais alors cela vous permet de passer à une autre bibliothèque.
Plus d'exemples
Il y a probablement quelques exemples de personnes qui utilisent l'API google maps avec OpenStreetMap. Listez-les ici:
- outil de visualisation de données OSM par kolossos on toolserver.org
- données OSM comme un ImageMapType dans une application Google Map V3
- busitlondon.co.uk fournit OSM comme une couche cartographique optionnelle
- munzee.com comme une couche cartographique optionnelle
- Streetmap smackdown affiche beaucoup de couches cartographiques dont OSM.
Liens relatifs
- Google maps vs OpenLayers - Une rédaction d'une discussion à WhereCamp.EU