How to get a hi-res Google Map

[hoodsmom]

I figured out how to get a reasonably high resolution Google Map for digital scrapbooking purposes. It won't take up an entire 3600x3600 px page, but it takes up a pretty good chunk of a page and looks pretty good (even better if you don't need a huge map on your page).

1. Open a public map or create a public map in "My Maps" in Google Maps.
2. Under "Sharing" in My Maps, select "Embed on my site"
There will be a long embed code beginning and ending with <iframe> tags.
3. Copy the embed code exactly as given by Google Maps into a new text editor (such as Notepad or TextEdit) document. Change the width and height to something big in pixels (I used 2500 x 2500) like so:

<iframe src="https://www.google.com/maps/d/embed?mid=1ZhFQzF6wlIuFeppvjtSPLx9fpSQ&hl=en" width="2500" height="2500"></iframe>

4. Save the document with an .html extension rather than a .txt extension.
5. Launch the new html document. It will open in your browser and it shouldn't have Google legends (yay!) There will be a small Google logo at the bottom, but it may or may not be captured (see my post #4 in this thread).
6. You will have to do some fiddling with zooming (on a Mac, using cmd plus scroll wheel; I assume it's control plus scroll wheel on PC) and positioning. It looks to me that what's going to print/get saved will be in the upper left of your screen, but it's rather trial and error.
7. Save the webpage as a pdf. Be sure to fix settings so that the document is NOT scaled to fit page width (you want it at 100%). Since I have a Mac, I "print" and in the resulting dialog box, use Preview to "save to pdf." I don't know if Windows has gotten built-in software to save to pdf, someone who uses Windows will have to chime in.
8. Open the pdf in Photoshop (300 ppi resolution). Macs have a special issue in that (vector-based) pdfs sometimes have fine "stitching" gridlines in pdfs that are opened in Photoshop - this is going to be one of those times. I was able to fix those that were visible with a healing brush.

You can try it yourself - copy the italicized embed code and follow the directions from step 3 on. (It's an exciting map showing the locations of Type C parking at UC Berkeley)

 

[VickiStegall]

This is awesome!!! I've wanted to use a map before and ended up just using it small. So glad to know this!

 

[hoodsmom]

Even easier...

This is even easier. Tested on Chrome and Firefox on Mac and gives an image of around 1639 px wide x 942 px high, which is decent for the kind of maps we're likely to put on a 3600x3600 page. You get a small Google logo at the bottom in the middle, but good image quality and no guesswork as to what will print.

Need to be in Google Maps without being in "My Maps." The map does not need to be public.

Zoom so the map is exactly how you want it to look. (It's kinda hard to explain, but the first method I posted is better if when you zoom in, you don't see the level of detail you want on your browser screen - if your final map is going to be "tall" and really big, this easier way may not work for you - a detailed map of Italy was hard to get this way, but a detailed map of Kansas is going to be more achievable.)

Use cmd-P (I assume that's control-P on a PC) to bring up a print button (on the top right) while in Google Maps. Again, be sure your print settings are such that the page will not be scaled down. Use a landscape format and a long paper (like legal). Save to pdf.

When you open the pdf in Photoshop, you get the option to open as "pages" or "images" - choose "images" for the best quality (the size will be fixed at around 1639 x 942. On more testing the actual size varies depending on your choice of paper size and possibly how big your browser window was).

You could get rid of the google logo by repositioning the map in your browser, saving another pdf and cutting and pasting a relevant section over the google logo. With greater difficulty you could get a bigger map by saving several pdfs and stitching them together in Photoshop.

 

[hoodsmom]

...bigger with good quality

I think this yields the best combo of quality and size with minimal guesswork so far:

install the extension "Fireshot" (Firefox and Chrome, I tested only in Firefox).

Use the first method I posted (with the embed code). Zoom with cmd-scroll so that when you use the **scrollbars** afterwards in your browser window, you see everything you want (when you use Fireshot, you'll be capturing everything you can see when you move the scrollbars around - no guesswork). Putting it another way, zoom and position with cmd-scroll scroll first, then quit zooming and use the scrollbars to see the results of your zooming and positioning. Make adjustments, then use the scrollbars again to check on what the map will look like.

Use the Fireshot options to capture the "entire page" to "pdf"

This method is a little tricky because it still takes some fiddling to zoom and position the map and then checki with the scrollbars to make sure everything you want is on the page. However, I got an approx 2250 square image with no stitching line artifacts this way. I also got a small Google logo because whereas Mac Preview captures only the top left of the page, Fireshot captures the whole page.

Bottom line, if I'm in a hurry I'll use method 2.
If I need a big detailed image (especially a big tall image) I'll use method 1 + Fireshot.

 

[clindoeil]

I will try this ! thank you !

 

[faerywings]

I never thought to use a map like that on a LO. What a great idea. Thank you so much for sharing your tip. Now I want to try it!

 

[taxed4ever]

I am anxious to try this out too! It would be awesome for my hiking pages! Thanks so much for the information!

 

[hoodsmom]

another tool

I have not experimented much with this, but Aaron Cheng has a free Google Map Customizer (google it) that requires only a browser and a tool to grab screenshots to pdf (e.g. built-in Mac screen capture or Fireshot extension). It's called "customizer" because you can selectively change the color of features such as water, labels, symbols, poi's, etc. and he has some presets - e.g., getting entirely grey maps. The principles for use are similar to the DIY method in post#1.

 

[hoodsmom]

After more experimentation I think I've finally worked out most of the kinks and I created an updated tutorial here https://sites.google.com/site/scrapwithmugcheck/high-resolution-google-maps

High-res maps of about 2500x2500 pixels are quite manageable. 3600x3600 are doable, but if you want a 3600x3600 that's "just so," be prepared to spend some time working at it.

Here's a sample of what you can do - a LO I made for one of the birthday challenges:
https://ozone.oscraps.com/gallery/showphoto.php?photo=389337&title=google-maps-saved-our-marriage

 

[hoodsmom]

More on Cheng's Google Map Customizer

I've done some more experimenting with Aaron Cheng's Google Map Customizer and I have a much better understanding of how it works. I updated my tutorial (see post #9). The information on the customizer is at the end. I didn't make a detailed step-by-step lesson for how to use the customizer, but as I discovered that custom settings are saved in a map's url, I added a couple of links that'll generate maps that are black and dark grey (so not too busy for a background for travel and vacation LO's).

If you're going to test out my links, I recommend setting the customizer's dimensions to something manageable like 2000x2000 and using something like Fireshot to "capture entire page." Play with zoom and pan and your browser's scrollbars and you'll get a sense of how to use Cheng's tool.

 

[VickiStegall]

That's great! thanks!

 

[Danesa]

How cool. I will have to see if I can figure it out. haha
Thank you for your research and experimentation for all of us.