I am facing a challenge with the following issue. I have implemented a custom overlay on a Google map and it works perfectly in the browser. However, my dilemma arises when I need to display an image with a marker for each point of interest on a different page. Many people opt for the Google Static Map API to achieve this, but unfortunately, it seems that this is not compatible with a custom tile overlay (as it cannot render the overlay in the image). It appears that the static maps API does not support custom map types.
Could someone guide me in the right direction on how to approach this problem? How can I capture a screenshot of the Google map without relying on the static map api? The code for my overlay is as follows:
function service (map, opts) {
opts = opts||{};
opts.size = +opts.size || 512;
if(!mapType){ mapType = createStyle(opts); }
map.mapTypes.set('aaa', mapType);
map.setMapTypeId('aaa');
return this;
}
function createStyle(opts){
return new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
zoom--;
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) { return; }
var url = [
'http://someUrl.com/api/MapTiles',
opts.tileVersion || 10030,
opts.size,
zoom,
normalizedCoord.x,
normalizedCoord.y,
].join("/");
return url;
},
tileSize: new google.maps.Size(opts.size, opts.size),
maxZoom: 19,
minZoom: 14,
radius: 1738000,
name: 'aaa'
});
}
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
var tileRange = 1 << zoom;
if (y < 0 || y >= tileRange) {
return null;
}
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {x:x, y:y};
}
Hopefully, this information is useful.