How To Create Large-Scale Google Map Images

I recently had a situation where I needed multiple large, stylised, detailed images of maps to use on a web project. The first port of call was to use Google Maps but the maps didn’t have the level of detail needed when viewed at the required zoom level.

Stylised Google Map

To get the map stylised I created a custom colour scheme using Snazzy Maps. It’s a little bit fussy and time consuming doing it this way but right now I don’t think there are many better options available (MapBox is an option but not one I could use here).

Increasing The Map Detail

With the map styled the next thing to look at was the level of detail. When zoomed in the map had enough detail in it but I needed a specific composition that needed the map zoomed quite far out. The solution that came to mind was to zoom in and get the required level of detail, take a screenshot, pan the map across, take another screenshot and repeat this process until I’d built a 5 × 5 grid of screenshots. These would then need to be stitched together. This was a workable solution for a single map, but when you’re creating a lot of maps it quickly becomes incredibly time-consuming. 25 images to be captured per map and stitched together. Not only is it time-consuming but it’s pretty mind-numbing work too.

To combat this I thought there might be a way I could code the map to automatically pan by a specified amount and automatically capture the content. This potentially seemed like it might be more time-consuming than the manual process listed above though and the actual solution that I came up with was far simpler (and ultimately faster).

Iframe To The Rescue

I created an iframe to the desired output size (in this case 5,000 × 5,000px) that loaded in the styled map. Obviously this iframe is way larger than my Macbook is capable of displaying without scrolling. For this reason it’s important when you create the iframe to include the scrolling=“no” attribute (unless you want visible scroll bars on your final image).

In Google Chrome I then zoomed out (not on the actual map, in Chrome itself) and got the composition as required. Once that was done I zoomed back in to 100% and used the Full Page Screen Capture extension to take the screenshot. This extension, unlike the screen capture command on the Mac captures everything on the page, whether it’s currently visible or not. As a result it’s able to capture huge maps based on the specified dimensions in your iframe code.

Hit the download button and you have your map at a large resolution with a good level of detail. No panning, no stitching and no need for 25 individual screenshots!

Hope it helps you.

Originally published at www.novolume.co.uk.