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

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: