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

jennisheppardBlog, Tech 20 Comments

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:

Comments 20

      1. Post
        Author

        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?

    1. Post
      Author
  1. 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?

    1. Post
      Author

      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!

  2. 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

  3. [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

  4. 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

  5. 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!

  6. Pingback: Anpassa zoom och utsnitt i Googles mina kartor | ptrkhmbrg

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

  8. Worth noting that this works for direct links to the map, as well as for embeds, e.g. this is correctly zoomed and centered: https://www.google.ca/maps/d/u/0/embed?mid=z3tkH5zB9hhg.kPSV2el7CdyI&z=15&amp;ll=49.268250, -123.150236

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.