Is this possible ? , i tried to make it works but my knowledge in javascript is too weak
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Image map types</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 46, lng: 3},
zoom: 8,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ['GDV']
}
});
var moonMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
var x = normalizedCoord.x;
var y = (bound - normalizedCoord.y - 1);
if ((x>=124 && x<=134) && ( (y<=170) && (y>=160)))
{
return 'http://www.govfr.fr/tuiles'
/*+ '/' + zoom +'x'*/
+ '/' + normalizedCoord.x + '/' +
(bound - normalizedCoord.y - 1) + '.png';
}
else
{
return 'http://www.govfr.fr/tuiles/tuilevide.png';
}
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 8,
minZoom: 8,
radius: 1738000,
name: 'GDV'
});
map.mapTypes.set('GDV', moonMapType);
map.setMapTypeId("GDV");
// Add some markers to the map.
map.data.setStyle(function(feature) {
return {
title: feature.getProperty('name'),
optimized: false
};
});
map.data.addGeoJson(cities);
}
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {x: x, y: y};
}
var cities = {
type: 'FeatureCollection',
features: [ {
type: 'Feature',
geometry: {type: 'Point', coordinates: [5.3697, 43.2964]},
properties: {name: 'Marseille'}
}, {
type: 'Feature',
geometry: {type: 'Point', coordinates: [2.3522,48.8566]},
properties: {name: 'Paris'}
}, {
type: 'Feature',
geometry: {type: 'Point', coordinates: [9.4508, 42.6972]},
properties: {name: 'Bastia'}
}, {
type: 'Feature',
geometry: {type: 'Point', coordinates: [151.207, -33.867]},
properties: {name: 'Sydney'}
}, {
type: 'Feature',
geometry: {type: 'Point', coordinates: [0, 0]},
properties: {name: '0°N 0°E'}
}]
};
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD73r-HJ6xBj484TTYlZMTe_HznYzmvvBU&signed_in=true&callback=initMap"></script>
</body>
</html>
