New Google Maps: How to customize the zoom on your embed

In Blog, Technology by jennisheppard20 Comments

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Classic My Maps is being phased out and being replaced by the new Google My Maps (formerly known as Maps Engine). The new My Maps adds lots of extra functionality – you can create different layers and import data, for example.

But you cannot easily adjust the zoom on the map when you choose to embed it.

I recently ran into this problem, when writing for my nacho review blog Best Nachos In Vancouver. As a fan of Google and an early adopter of anything it releases, I decided to switch my nacho map from Classic My Maps to the new Google My Maps.

Crucially, although the map shows all the nachos I’ve reviewed, I need it to be zoomed very specifically for each different review. Each embed needs a different zoom, so it shows the restaurant being reviewed.

After scouring some forums, I found a hack for the embed code which – with a little experimenting – should get us what we want. Here’s how it works:

GET THE EMBED CODE

Embed-code
Get the embed code from the new Google Maps, by clicking on the folder icon in the top left corner and choosing Embed on my site. A box will appear with the code in. It will look like this:

<iframe src=”https://www.google.ca/maps/d/u/0/embed?mid=z3tkH5zB9hhg.kPSV2el7CdyI” width=”640″ height=”480″></iframe>

GET YOUR ZOOM COORDINATES

Coordinates
Decide on the point you would like to be at the centre of your zoom.

In regular Google Maps search for that point and copy the latitude longitude coordinates.

You can do this two ways:

1) search for the point you want to centre the map on e.g. Las Margaritas Restaurant. The coordinates can be found in the URL produced by the search e.g.

https://www.google.ca/maps/place/Las+Margaritas/@49.268306,-123.150075,17z/data=!3m1!4b1!4m2!3m1!1s0x548673b5d796ec81:0xffa99a6ad0e435be?hl=en

2) right click on the map wherever you want to centre the map. Choose What’s here? The coordinates can be found in a card that pops up in the top left.

RECONSTRUCT THE EMBED CODE

Now for the tricksy bit. When you’ve got your coordinates, reconstruct the embed code as follows:

<iframe src=”https://www.google.ca/maps/d/u/0/embed?mid=z3tkH5zB9hhg.kPSV2el7CdyI&z=nn&ll=nn,-nn” width=”640″ height=”480″></iframe>

&z=nn is where you put your level of zoom, between 1 (the least zoomed in) to 20 (the most zoomed in) e.g. &z=15

&ll=nn,-nn is where you put your coordinates. e.g. &ll=49.268250, -123.150236

You should end up with something like this:

<iframe src=”https://www.google.ca/maps/d/u/0/embed?mid=z3tkH5zB9hhg.kPSV2el7CdyI&z=15&amp;ll=49.268250, -123.150236″ width=”640″ height=”480″></iframe>

 

Which will give you something like this:

You might also like...

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail
19 comments
ptrkhmbrg
ptrkhmbrg

I've been struggling to find a solution to this. Thanks for sharing. This was exactly what I was looking for.

missbeasley
missbeasley

YOU ROCK GIRL! Exactly what I needed to make my customers map look just perfect. Blessings upon you Jenni!

Stuart
Stuart

Hi I wanted to say thank you very much for that. Genuinely helpful and clear

jknol
jknol

This is remarkably helpful.  Thank you kindly.

chris
chris

awesome. exactly what i was looking for. freaking google.. now i just need to get rid of that ugly ass frame. 

Andris
Andris

Hey super helpful reference, thanks!

Brooklynn Holtz
Brooklynn Holtz

I'm so glad I found you! This answered my question EXACTLY and, even though I have NO training in coding, I made it work with your help! Thank you!!

Matt
Matt

Hi Jenni, The only thing I noticed in the tutorial that was incorrect was the final code where you said "You should end up with something like this:" The &; in the code is not needed. Just the z=15&ll=(coordinates) Hope this helps someone struggling with the code. Take care, and great article. Thanks!

Jean-Charles Brotons
Jean-Charles Brotons

Dear Jenni, I posted my question on the relevant Google forum, where I was told there is no parameter for what I had in mind. I followed up by passing the suggestion on to developers. Best, Jean-Charles

Jean-Charles Brotons
Jean-Charles Brotons

[Edited version of the previous comment.] Dear Jenni, I have read your ‘New Google My Maps’ article, which was quite helpful. I have some further questions: Do you know about any parameter in a My Maps URL to (1) add a pointer (arrow or balloon) on a centered and marked location, or (2) open the info or picture window corresponding to the centered and marked location. Follows a URL to understand why I am asking: https://www.google.com/maps/d/u/0/embed?mid=zwpdFSlWpK6s.kk7lNuMKA2XQ&z=20&ll=35.695765,51.431775 I often have many, quite close to each other, marked locations, and need to indicate which of them is correspond to a photo in a forthcoming of edition of my tehranimages.org website. When dealing with a cluster of marked locations, just centering and zooming on one does not make matters clear enough. Best, Jean-Charles

Jean-Charles Brotons
Jean-Charles Brotons

Dear Jenni, I have read in your 'New Google My Maps' article, which was quite helpful--many thanks. I have some further questions: Do you know about any parameters in a My Maps URL to (1) add a pointer (arrow or balloon) on a centered and marked location, or (2) have the info or picture window corresponding to the centered and marked location open. Follow a URL to understand why I am asking: https://www.google.com/maps/d/u/0/embed?mid=zwpdFSlWpK6s.kk7lNuMKA2XQ&z=20&ll=35.695765,51.431775 I often have many, quite close to each other marked locations, and need to indicate which of them is correspond to a photo in a forthcoming of edition of the tehranimages.org website. When dealing with a cluster of marked locations, just centering and zooming on one does not make matters clear enough. Best, Jean-Charles

Mitch
Mitch

The right click to get Lat & Long doesn't work, and the point I want to centre on is a place on my map so the search function does not generate a URL.. Suggestions?

jennisheppard
jennisheppard

Hey Mitch, Are you finding the Lat & Long you want to centre your My Map on, by searching for that point in regular Google Maps? If you do that, you should be able to right click and choose What's here? as in my directions. Let me know if you're doing that and still having problems!

ssali ronald
ssali ronald

Thanx alot..i had failed to lower the zoom effect in my embedded location map, i actually just inserted &z=nn without the cordinates and it worked

jennisheppard
jennisheppard

That's great - glad you could get it to work for you!

Felipe A
Felipe A

También puedo cambiar el color del mapa desde este iframe?

jennisheppard
jennisheppard

Hola - lo siento que tanto tiempo ha pasado antes de que he respondido. No sé si puede cambiar el color del mapa - me parece una buena idea. ¿Has descubierto como hacerlo?

Trackbacks

  1. […] att ha letat länge och väl hittade jag till slut en lösning på problemet. Jenni Sheppard levererade lösningen på mina problem. Jag är henne evigt (nåja) […]