How do I parse a Google map embed code so that I can change zoom?

Question

I want to embed three different Google maps centered on the same point on three separate pages of my website. Each of the three maps will have a different level of zooming: one will show a large area (a few hundred kilometers around the point), one will show a few blocks either way from the point, and the other will be somewhere in between, showing most of the city and its major routes. This will enable the user to have each map show a close approximation of what he wants and then be able to zoom in or out manually as far as needed.

I used to do this with a Google account where I could set the zoom as I liked with JavaScript code like this:

var LPL_coords = new google.maps.LatLng(42.984600,-81.246048);

var mapOptions = {
    zoom: 7, 
    center: LPL_coords,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

But this approach seems as if it has been discontinued and now I'm just supposed to display a map of what I want in Google Maps, the click on Share/Embed, and paste this in my webpage:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2918.706970104127!2d-81.24853538494362!3d42.98444597914988!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882ef18a6b73ed7f%3A0x570f72a4737585d6!2s251+Dundas+St%2C+London%2C+ON+N6A+6H9!5e0!3m2!1sen!2sca!4v1556807969289!5m2!1sen!2sca" width="800" height="600" style="border:2px dotted blue"></iframe>

The problem with this is that it is very cryptic. How do I make it change the zoom level to 7 or 13 or whatever?

Don't get me wrong: if it means I don't need to bother with JavaScript - which I was using only for this one purpose - then that's great. But I have no idea how to parse most of that long string, especially the zoom.

Answer 1

It turns out that I was going about this the hard way, which I eventually realized.

If I want three maps of the same place, each zoomed to a different level, I merely have to:

1. Go to Google Maps. In my case, that is http://maps.google.ca.
2. Search for the address I want. In my case, that is 251 Dundas St. London, Ontario, Canada.
3. Zoom the map to the level I want for the first map.
4. Click on Share.
5. Click on "Embed a map".
6. On the resulting dialog, click on the size of the map I want (the default is "medium" but I can also choose "small", "large" and "custom"), then click the COPY HTML button.
7. Paste that URL into my document.
8. Repeat step 3, changing the zoom to a second level, then repeat steps 4 through 7.
9. Repeat step 3, changing the zoom to a third level, then repeat steps 4 through 7.

Answer 2

I was having the same problem setting the zoom level so I played around with and figured it out.

Adding a zoom parameter (e.g. zoom=4) used to work but that doesn't work with the current embed code.

Adjusting the zoom in the share does not work, so the trick is to adjust the zoom in the big map window BEFORE opening the share window.