HTML5 - GoogleMap - Layer OpenStreetMap

OpenStreetMap avec Google Map

Dans cet article, je vais vous montrer comment afficher un layer OpenSteetMap grâce à l'API Google Map en javascript.Tout cela est bien évidement utilisable en HTML5 pour réaliser une WebApp.

Pour rappel, l'intégration de l'API Google Map en javascript est requise.Pour cela, copier la balise ci-dessous :

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>
   

Ensuite, il est nécessaire d'ajouter une balise div permettant d'afficher la Map. Comme ceci :

1. < div id="map" /> < /div>

Maintenant, il faut créer la Map via l'API Google Map. Mais cette fois, on ne va pas mettre un map type Google Map comme par exemple celui des routes : google.maps.MapTypeId.ROADMAP

Mais cette  fois, c'est un type particulier : "OSM", de plus il faut le coupler avec un paramètre supplémentaire : mapTypeControlOptions

1. map = new google.maps.Map(element, {
2.    center: new google.maps.LatLng(me.latitude, me.longitude),
3.    zoom: 15,
4.    mapTypeId: "OSM",
5. mapTypeControlOptions: {
6.   mapTypeIds: ["OSM"]
7. }
8. });

Par rapport à un layer Google Map, il est nécessaire d'obtenir l'image OpenStreetMap. Voici le code javascript nécessaire pour afficher le visuel OpenStreetMap.

1. map.mapTypes.set("OSM", new google.maps.ImageMapType({
2.             getTileUrl: function(coord, zoom) {
3.                      return "http://tile.openstreetmap.org/" + zoom + "/"
4.                          + coord.x + "/" + coord.y + ".png";
5.                     },
6.                 tileSize: new google.maps.Size(256, 256),
7.                 name: "OpenStreetMap",
8.                 maxZoom: 18
9.        }));

C'est assez fun et puis c'est un avant goût de la prochaine cartographie d'IOS6. Apple a décidé d'abandonner Google Map au profit d'Open Street Map pour la prochaine mouture d'IOS.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.