Google Map Embed - Position, Zoom, Color

google-map-embed.md

Embed a Google Map on a Google Site

This article applies to Google Workspace and Google My Maps, though the concepts should work with any Google Map.

While Google Sites has a quick embed for My Maps, it lacks position, zoom, and color control. Instead, we start with the Google-generated embed code, modify it, and add it to the site as a regular embed.

Get the Position and Zoom

1. My Maps > Map > Preview. Opens in new tab.
2. Position and zoom map as desired.
3. Copy the URL in the address bar.
4. Note the tail starting with &ll= (position) and including &z=12 (zoom).
5. Leave the Preview open - you may need to tweak the position.

https://www.google.com/maps/d/viewer?mid=1wZMZIeRkbRYmNuvRnALGNIGXsExMvRE&ll=39.89729767477476%2C-75.02168320117188&z=12

Position: &ll=39.89729767477476%2C-75.02168320117188
Zoom: &z=12
Note larger numbers zoom in.

Get the Base Embed Code

Preview > Share > Embed on My Site

<iframe 
  src="https://www.google.com/maps/d/embed?mid=1wZMZIeRkbRYmNuvRnALGNIGXsExMvRE&ehbc=2E312F" 
  width="640" height="480">
</iframe>

Add Color, Position, Zoom, Lazy Loading

1. Edit title bar color by changing the HEX value &ehbc=2E312F.
2. Add the tail noted above to the tail of src.
3. Add the loading="lazy" attribute to the iframe tag.

<iframe 
  src="https://www.google.com/maps/d/embed?mid=1wZMZIeRkbRYmNuvRnALGNIGXsExMvRE&ehbc=2E312F&ll=39.89729767477476%2C-75.02168320117188&z=12" 
  width="640" height="480" 
  loading="lazy">
</iframe>

Title Bar: &ehbc=2E312F
Pos + Zoom  &ll=39.89729767477476%2C-75.02168320117188&z=12

Add Responsive CSS

1. Wrap the iframe in 2 additional div tags and add classes to all.
2. Add this to your site from Insert > Embed > Embed Code.
3. You will need to tweak the site container to fit the map.
4. Be sure to use the Site Preview to confirm appearance.
5. You may need to tweak the map by repeating the "Get Position and Zoom" steps above.

The important thing with this CSS is that Google uses a 4:3 aspect ratio.

padding-top = height / width = 0.75 or 75%

<style>
  .gmap-style {
    border:1px solid rgb(184, 189, 201);
    border-radius: 4px;  
  }
  .gmap-div {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 75%; 
  }
  .gmap-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
  }
</style>

<div class="gmap-style">
  <div class="gmap-div">
    <iframe class="gmap-iframe" src="https://www.google.com/maps/d/embed?mid=1wZMZIeRkbRYmNuvRnALGNIGXsExMvRE&ehbc=0F0F0F&ll=39.885180404347615%2C-75.0003971904297&z=12" width="640" height="480" frameborder="0" loading="lazy" ></iframe>
  </div>
</div>