How to adjust zoom on embedded Google Maps – 2019

I was embedding some Google maps and was having a bit of trouble setting the initial zoom level but after playing around with it for awhile I figured out how to do it, so I thought I would share it here in case it helps someone.

Note: Google keep changing how their embed code is structured so this article refers to the current version (as of 2019) of a Google Maps embed which looks something like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11994.704174356148!2d173.285536!3d-41.272389!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7e1c2b77c0cbaec7!2sThe+Bridge+Street+Collective!5e0!3m2!1sen!2snz!4v1565732449245!5m2!1sen!2snz" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

The problem I was having was I would open up the Share window, click Embed Map tab and then adjust the zoom level. This does not work!

Problem adjusting zoom of embedded Google maps

For example I did just that with this map and I zoomed it in all the way but the zoom does not take effect after I embed it:

An old trick that used to work was to add a zoom parameter to the end of the URL e.g. &zoom=6 but this trick does not work with the current embed code that Google Maps generates.

The trick now is to adjust the zoom on the big map BEFORE opening the share window. So now you see my example embedded map is zoomed in all the way:

A bonus trick, but you probably already know this, is to make the map full width by changing the width parameter to width="100%". This works well for responsive web design.

3 Responses to How to adjust zoom on embedded Google Maps – 2019

  1. Wendy says:

    This doesn’t work for me, if you mean to zoom to preferred level in mymaps, then open the share window, select embed and copy the code. It used to be so easy… I miss being able to add the zoom with the embed code.

  2. aidancurran says:

    Hi Wendy, just tested it and it still works for me. And no I don’t mean mymaps. Just in regular Google maps – http://www.google.com/maps. You have to search for location first, then zoom to desired level, then click on the share button.

  3. Neil says:

    Hi Wendy, add this to the end of your code:

    &z=9&ll=53.38885,-0.33379

Leave a Reply

Your email address will not be published.

© 2020 Stellar Web Works Ltd.