I am currently working on the Google MAP API for a personal project. I am using around 1000 pictures to create my own map. Hence, I am using the example of Google API moon example and it works great.
However, in my case, I want to add some differences but I have a problem. I am trying to use the same images for each level of zoom and just changing the tile size for each level of zoom. For example, for a zoom=9, I want my tile size = 512*512, for zoom=8, tile size=256*256 ... I tried to write the code but no success.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 1,
streetViewControl: false,
mapTypeControlOptions: {
mapTypeIds: ['Project']
}
});
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);
return 'file:///C:/Users/Desktop/PHOTOS/'
+ zoom + '.' + normalizedCoord.x + '.' +
(bound - normalizedCoord.y - 1) + '.jpeg';
},
tileSize: new google.maps.Size(256,256),
maxZoom: 9,
minZoom: 0,
radius: 1738000,
name: 'Project'
});
map.mapTypes.set('Project', moonMapType);
map.setMapTypeId('Project');
}