<!DOCTYPE html>
<html>
<head>
<title>Exemple GoogleMaps ICGC</title>
<style type="text/css">
html{
overflow:hidden;
margin:0
}
body{
overflow:hidden;
margin:0
}
#map {
height: 100%;
width: 100%;
position:absolute;
top:0px;
}
.gm-style-cc{
display: none;
}
</style>
<script>
let map;
function initMap() {
const centre = {
lat: 42,
lng: 2
};
const mapaICGC = new google.maps.ImageMapType({
alt: "Mapa ICGC",
getTileUrl: function (tile, zoom) {
var url = "https://geoserveis.icgc.cat/servei/catalunya/mapa-base/wmts/topografic/MON3857NW/" + zoom + "/" +
tile.x + "/" + tile.y + ".png";
return url;
},
isPng: true,
maxZoom: 20,
minZoom: 1,
name: "Mapa ICGC",
tileSize: new google.maps.Size(256, 256)
});
map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: centre,
streetViewControl: false,
mapTypeId: 'ICGC',
mapTypeControlOptions: {
mapTypeIds: ['ICGC']
}
});
map.mapTypes.set('ICGC', mapaICGC);
map.setMapTypeId('ICGC');
addICGCAttribution();
}
function addICGCAttribution() {
let copyrightDiv;
if (!document.getElementById("map-copyright")) {
copyrightDiv = document.createElement("div")
copyrightDiv.id = "map-copyright"
copyrightDiv.style.fontSize = "11px"
copyrightDiv.style.margin = "0 2px 2px 0"
copyrightDiv.style.whiteSpace = "nowrap"
copyrightDiv.style.backgroundColor = "rgb(245, 245, 245)";
copyrightDiv.style.width = "auto";
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(copyrightDiv)
copyrightDiv.innerHTML = 'Catalunya: Institut Cartogràfic i Geològic de Catalunya | Resta del món:Open Street Map Contributors. OpenMapTiles';
}
}
</script>
</head>
<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLaHrio04yJNbt6I2dHAEGnjHsFTWMT4A&callback=initMap&libraries=&v=weekly"
async></script>
</body>
</html>