test:google-maps-geoportail [Orel's Wiki]

Carte Google Map avec layer du Geoportail

Voilà comment afficher les cartes IGNs via l'API Google Map : http://geopole.free.fr/?Geoportail-API-Google
Des infos ici également : http://api.ign.fr/documentation/324/comment-afficher-les-donnees-de-reference-de-l-ign-dans-une-page-utilisant-l-api-google-maps
Demo

Code

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 
<style type="text/css">
/** 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);
}
</style>
</head>
 
<body>
<div id="map" style="width:100%; height:600px;"></div>
 
<script type="text/javascript" >
// Copyright (c) 2013 Jean-Marc VIGLINO released under the Beerware license 
 
var APIKEY = "c19uzdyrb5yttrgmhr2mmyij"; // only for this web site
var LAYER = "GEOGRAPHICALGRIDSYSTEMS.MAPS";
var here = new google.maps.LatLng( 42.829535, 0.052279); // col de Marraut
 
// 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 = ' &copy; <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: here, 
    zoom: 15
  });
 
  /** Definition des couches  */
  // Carte IGN 
  map.mapTypes.set('carte', geoportailLayer("Carte IGN", APIKEY, LAYER, { 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: here, map: map });
  google.maps.event.addListener(marker, 'click', function() {  infowindow.open(map,marker); });
  infowindow.open(map,marker);
 
}
google.maps.event.addDomListener(window, 'load', initMap);  
</script>    
</body> 
</html>