Comme pour les exemples précédents, la première étape consiste à charger la bibliothèque en incluant le script (JS) de GoogleMap :
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> Pour plus d’information, rendez-vous sur le site de l’API Google Maps Javascript v.3.
Il faut ensuite ajouter une div pour la carte :
<div id="map" style="width:100%; height:400px;"></div> Nous allons maintenant devoir déclarer un calque Google (un ImageMapType)
function geoportailLayer (name, key, layer, options)
{ var l= new google.maps.ImageMapType
({ getTileUrl: function (coord, zoom)
{ return "http://wxs.ign.fr/" + key + "/geoportail/wmts?LAYER=" + layer
+ "&EXCEPTIONS=text/xml&FORMAT="+(options.format?options.format:"image/jpeg")
+ "&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile"
+ "&STYLE="+(options.style?options.style:"normal")+"&TILEMATRIXSET=PM"
+ "&TILEMATRIX=" + zoom + "&TILECOL=" + coord.x + "&TILEROW=" + coord.y;
},
tileSize: new google.maps.Size(256,256),
name: name,
minZoom: (options.minZoom ? options.minZoom:0),
maxZoom: (options.maxZoom ? options.maxZoom:18)
});
l.attribution = ' © <a href="http://www.ign.fr/">IGN-France</a>';
return l;
}
Il ne nous reste plus qu’à déclarer la couche "carte"…
map = new google.maps.Map( document.getElementById('map'),
{ mapTypeId: 'carte',
streetViewControl: false,
mapTypeControlOptions: { mapTypeIds: ['carte', google.maps.MapTypeId.ROADMAP] },
center: new google.maps.LatLng(48.845, 2.424),
zoom: 15
});
et à y inclure cette couche sur la carte Google :
map.mapTypes.set('carte', geoportailLayer("Carte IGN", apiKey,
"GEOGRAPHICALGRIDSYSTEMS.MAPS", { maxZoom:18 }));
A ce stade, tout marche bien et la carte s’affiche correctement, il nous reste cependant un détail à régler : ajouter l’attribution à la carte IGN.
Pour cela, deux solutions, ajouter un texte sous la carte ou utiliser un control GoogleMaps. Nous utiliserons la seconde solution avec le code ci-dessous.
function geoportailSetAttribution (map, attributionDiv)
{ if (map.mapTypes.get(map.getMapTypeId()).attribution)
{ attributionDiv.style.display = 'block';
attributionDiv.innerHTML = map.mapTypes.get(map.getMapTypeId()).name
+map.mapTypes.get(map.getMapTypeId()).attribution;
}
else attributionDiv.style.display = 'none';
}
// Ajouter un control pour l'attribution
var attributionDiv = document.createElement('div');
attributionDiv.className = "attribution";
geoportailSetAttribution (map, attributionDiv);
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(attributionDiv);
Le control s’affiche bien mais il reste affiché lorsqu’on passe sur une couche Google, pour cela, demandons à Google de nous prévenir lorsqu’on change l’affichage :
google.maps.event.addListener (map, 'maptypeid_changed',
function()
{ geoportailSetAttribution (this, attributionDiv);
});
Et voilà le résultat !
Affichage du Géoportail avec l'API GoogleMaps
<!----------------------------------------------------------
Copyright (c) 2013 Jean-Marc VIGLINO,
released under the Beerware license (http://fr.wikipedia.org/wiki/Beerware).
Affichage d'une carte Geoportail avec Google Map.js
------------------------------------------------------------>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<div id="map" style="width:100%; height:400px;"></div>
<p class="spip_doc_titre">
Affichage du Géoportail avec l'API GoogleMaps
</p>
// Definition url des services Geoportail
function geoportailLayer(name, key, layer, options)
{ var l= new google.maps.ImageMapType
({ getTileUrl: function (coord, zoom)
{ return "http://wxs.ign.fr/" + key + "/geoportail/wmts?LAYER=" + layer
+ "&EXCEPTIONS=text/xml"
+ "&FORMAT="+(options.format?options.format:"image/jpeg")
+ "&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile"
+ "&STYLE="+(options.style?options.style:"normal")+"&TILEMATRIXSET=PM"
+ "&TILEMATRIX=" + zoom
+ "&TILECOL=" + coord.x + "&TILEROW=" + coord.y;
},
tileSize: new google.maps.Size(256,256),
name: name,
minZoom: (options.minZoom ? options.minZoom:0),
maxZoom: (options.maxZoom ? options.maxZoom:18)
});
l.attribution = ' © <a href="http://www.ign.fr/">IGN-France</a>';
return l;
}
// Ajout de l'attribution Geoportail a la carte
function geoportailSetAttribution (map, attributionDiv)
{ if (map.mapTypes.get(map.getMapTypeId()).attribution)
{ attributionDiv.style.display = 'block';
attributionDiv.innerHTML = map.mapTypes.get(map.getMapTypeId()).name
+map.mapTypes.get(map.getMapTypeId()).attribution;
}
else attributionDiv.style.display = 'none';
}
var map;
// Initialisation de la carte
function initMap()
{ // La carte Google
map = new google.maps.Map( document.getElementById('map'),
{ mapTypeId: 'carte',
streetViewControl: false,
mapTypeControlOptions: { mapTypeIds: ['carte', google.maps.MapTypeId.ROADMAP] },
center: new google.maps.LatLng(48.845, 2.424),
zoom: 15
});
/** Definition des couches */
// Carte IGN
map.mapTypes.set('carte', geoportailLayer("Carte IGN", MA_CLE, "GEOGRAPHICALGRIDSYSTEMS.MAPS", { maxZoom:18 }));
// Ajouter un control pour l'attribution
var attributionDiv = document.createElement('div');
attributionDiv.className = "attribution";
geoportailSetAttribution(map, attributionDiv);
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(attributionDiv);
// Afficher / masquer le copyright en fonction de la couche
google.maps.event.addListener(map, 'maptypeid_changed',
function()
{ geoportailSetAttribution(this, attributionDiv);
});
// Ajouter une punaise
var infowindow = new google.maps.InfoWindow ({ content: "C'est facile !" });
var marker = new google.maps.Marker
({ position: new google.maps.LatLng(48.84475, 2.4237),
map: map
});
google.maps.event.addListener(marker, 'click',
function()
{ infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initMap);
/** Style pour l'attribution Geoportail */
.attribution
{ background-color:rgba(255,255,255,0.5);
padding:0 6px;
color:#444444;
font-size:10px;
}
.attribution:hover
{ background-color:rgba(255,255,255,0.8);
}
Géopole