Digital/multimedia

How to get a Google map to zoom the way you want it

Google map sample

Sometimes when you embed a Google map, what surfaces on your site by default is not the point or area you want your readers to see. There’s an easy way to control that by adding a few characters to the embed code.

The image you see above is how the map looked in Google Maps. The zoom is backed up enough to see all of the pins on the map.

Sometimes when you grab the embed code and add it to a story, the image is zoomed out even more, showing too much useless map space.

This isn’t the end of the world, as I think most people grasp the concept of zooming in and out of a Google map. However, there may be maps where the default zoom makes a difference, so here’s how you can control it.

Here’s the embed code for the map you see above:

<iframe src=”https://www.google.com/maps/d/embed?mid=18EKxzoXQArIUdkqyTANCa4aO408″ width=”640″ height=”480″></iframe>

I am in no way a coder, so believe me when I tell you, I have no idea what most of that code is saying or doing or not doing. But people on Google know! A quick search for “how do I control the zoom on a Google map” yielded some helpful answers.

The thing that controls the zoom is not part of the given embed code. It needs: &z= and then a number that indicates the zoom level, plunked into a specific spot in that embed code.

In my example, the additional code needs to be added after …TANCa4aO408 but before the quotation mark, no spaces. Resulting in:

<iframe src=”https://www.google.com/maps/d/embed?mid=18EKxzoXQArIUdkqyTANCa4aO408&z=15″ width=”640″ height=”480″></iframe>

You will notice when you do this that it changes itself to say &amp;z=15. I didn’t type that. It changes itself to have amp;. So don’t worry about typing it that way.

15 is zoomed way in. Too close, actually, for this map, as seen below.

Google map zoom level 15

So I tried again, this time using a zoom level of 5:

<iframe src=”https://www.google.com/maps/d/embed?mid=18EKxzoXQArIUdkqyTANCa4aO408&z=5″ width=”640″ height=”480″></iframe>

Google map zoom level 5

Needless to say, that’s too far out for this map. I could have just stuck with the original code.

In true Goldilocks fashion, I tried one more time, using a zoom level of 10.

<iframe src=”https://www.google.com/maps/d/embed?mid=18EKxzoXQArIUdkqyTANCa4aO408&z=10″ width=”640″ height=”480″></iframe>

Google map zoom level 10

This one is just right. You at least get a sense of the differences so you could play around with what level might work for your map needs.

It’s worth noting that everything I read said this only really works using “classic” Google maps, as in google.com/maps. If you are inclined to use Maps Engine, at mapsengine.google.com, then you probably can’t use this trick.

This link shows another map with zoom levels at default, 15 and 10 embedded in a story if you want to see how it behaves.

Incidentally, you might want to change the width/height part of the code to make that map responsive, meaning if someone opens it on mobile, it will scale to fit the smaller screen.

Simply change the width to be 100% and omit the height altogether (unless you really do want to control the height, in which case, tweak the number until it looks the way you want on your site).

<iframe src=”https://www.google.com/maps/d/embed?mid=18EKxzoXQArIUdkqyTANCa4aO408&z=10″ width=”100%”></iframe>

Previous post

Don't get a penalty! Use these AP Style terms to cover the World Cup

Next post

Test your knowledge of these crime terms