Convert custom google map into an image

Question

I have been challenged with following problem. I have a google map, I apply custom overlay over all the tiles. Map works flawlessly in the browser, but for each point of interest I need to present an image with marker on a different page. To achieve this, most people use Google Static Map API, but that doesn't seem to be supported with custom tile overlay (because it cannot render the overlay in the image). Unfortunately after searching it looks like static maps api doesnt support custom map types.

Can anyone point me to a right direction of how I can approach this problem? How can I save google map as an image, without using static map api? My overlay looks like this:

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};
    }

Hope this helps.

How can I save google map with custom overlay as an image, without using static map api? — Tatarin, Jul 20 '16 at 17:57
Doesn't it generate a canvas element? I'm not sure, but, if does it might help you http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl — Leonardo Lana, Jul 20 '16 at 18:04
Yeah I've looked into the canvas option, which doesn't work for my case. The only solution I was able to find that somewhat helpful is static api, but it's fairly limited — Tatarin, Nov 03 '17 at 22:05

score 0 · Accepted Answer · answered Jul 22 '16 at 18:57

0

If you need to automate the process which produces the image, a tool like PhantomJS can help you write a script to automatically take a screenshot of a webpage (which you've drawn using the Google Maps JavaScript API).

http://phantomjs.org/screen-capture.html

answered Jul 22 '16 at 18:57

xomena

31,125
6
88
117

I'll look into it, i dont need this for automation. this is more of not to take million screenshots for every marker on my map – Tatarin Jul 22 '16 at 19:14

Convert custom google map into an image

1 Answers1

Linked