Google Maps image?

Question

Is there any way to capture the image of a Google Map? I can't use the static map because I have my own polylines in the map and I want them in the "screenshot".

Basically I want a user to navigate the map, add some polylines, and when he clicks Save I'm saving the lines, coordinates, zoom, but I would also like to have an image to present as a thumbnail in lists.

Tks in advance.

Javelin

I just found out that the static map can also draw lines. The points are sent through the URL. E.g. maps.google.com/… This still is not a solution because if I have 50 points to be drawn into lines I will get a huge URL that will not be accepted. Any other ideas? – Javelin

50 points on a static map is not very many. You have 8K to play with on that URL, so go nuts! – Sudor

here is the snashotcontrol 2.0 – Pyroconductivity

Answer 1

Masashi Katsumata has come up with a Snapshot Control that takes a snapshot of a Google Maps with a path on it and creates an image from it.

• Blog post: http://googlegeodevelopers.blogspot.com/2009/09/snapshotcontrol-10-using-static-maps.html

Polonaise

I think this is the "official" solution to the problem. – Farlie

Although it allows him to export polygons easily, it's still using static map api. If you want the map as you drew it, saving the canvas is also a valid method (see my answer) – Meister

Answer 2

Using Google Maps Content outside of the Service is a violation of the Google Maps API Terms of Use, so although techniques exist for creating the snapshots, Google doesn't give you permission to do so.

To achieve your intended functionality legally, you either need to use static maps (possibly with reduced content, particularly if the user is using MSIE where the max URL length is quite small) or small real Google Maps.

I don't seem to have privilege yet to add or edit comments to the question, so I'll mention here that the URL limit in at least some Maps compatible versions of MSIE is 2083 characters, not 8k like it is in most other browsers.

Gombosi

Not really a problem though, if the user is using a real Google map to generate the screenshot in the first place. – Utility

You will get a 400 error from Google servers if the URL exceeds their 2048 character URL size restriction. It doesn't matter which browser you use. – Kaela

Answer 3

If you want to save more than google maps static API allows (such as custom overlays drawn onto it too complex/large to pass through the querystring), you could export the map container to a canvas using something like html2Canvas (http://html2canvas.hertzen.com/), then convert it to a data URL and do with it as you wish.

function saveMapToDataUrl() {

    var element = $("#mapDiv");

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");

            // DO SOMETHING WITH THE DATAURL
            // Eg. write it to the page
            document.write('<img src="' + dataUrl + '"/>');
        }
    });
}

I believe you need to set the useCORS option to true in order to allow the function to download images from google.

The downside to this approach is it could leave you with about a megabyte of data sitting on your page.

I've tried to use this approach to EXPORT a map to an image to download, but have run into problems in how to get this image to the person in a nice manor. You could use a hyperlink which has it's href attribute set to the dataUrl you created, but the file name cannot be set unless you use HTML attributes like download="filename.png", which has been problematic on different browsers for me. Another approach is to post the dataUrl to the server for the server to then dish out like it needs to, but uploading a large image only to download it again does seem a strange way to handle this.

Meister

Thanks for the useCORS option, was using the same html2canvas lib but map image wasnt coming properly, with the useCORS option it is coming as intended – Josiah

Answer 4

You may use ThinkGeo Map Suite. They support rendering images from Google, Yahoo or MS Map services, while you may draw your poly lines, etc on that map...

Working with their Map Suite V3 is a piece of cake

Grigri

Gonna look at it. Tks for the tip. – Javelin

Answer 5

Google doesn't provide this functionality with its API. However, there are a few scripts for scraping this information from the page. The following site has a PHP script that does it:

http://groups.google.co.uk/group/Google-Maps-API/browse_frm/thread/e9696444518ac079?hl=en

See the posts toward the end.

Misesteem

Answer 6

Can't do it with the maps API, as mentioned above, but Yahoo offers one and it is pretty painless to use.

Yahoo: Map Image API

Foreign

service removed September 13, 2011 – Iredale