Skip to the tool
Log inGet Vivid360

Map embed

Put your location map on any website

Runs in your browser. Nothing is sent unless you share it.

Example

Helps Google place the marker on your business.

Map type

15

Pixels, for example 600, or a percentage, for example 100%.

Embed code for your website

<div class="v360-map-wrap" style="position:relative;width:100%;max-width:600px;">
  <iframe
    src="https://www.google.com/maps?q=Souq%20Caf%C3%A9%2C%20Al%20Seef%20Street%2C%20Bur%20Dubai%2C%20Dubai&z=15&t=m&output=embed"
    width="100%" height="450"
    style="border:0;"
    allowfullscreen loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
  <a href="https://www.google.com/maps/dir/?api=1&destination=Souq%20Caf%C3%A9%2C%20Al%20Seef%20Street%2C%20Bur%20Dubai%2C%20Dubai" target="_blank" rel="noreferrer"
     style="display:inline-block;margin-top:8px;background:#4348E5;color:#fff;padding:8px 14px;border-radius:8px;font:600 13px system-ui;text-decoration:none">Get directions</a>
</div>
Open link

The map fills the width on phones, so 600 pixels becomes its largest width.

Preview

The preview loads the map from Google. Nothing is sent to Google until you press Show preview.

vivid360.io/tools/map-embed

How it works

  1. Type your address or the name of your place, and your business name for the label.
  2. Choose roadmap, satellite, hybrid or terrain, and the zoom: about 13 for an area, 15 for a building, 17 for street level.
  3. Set the width and height, or make the map fill the width on phones.
  4. Copy the code and paste it into your website. Press Show preview to see the map from Google first.

Related tools

Property tourA listing page with photos and enquiriesBusiness cardA digital business card with its own pageWhatsApp linkA link that opens a chat with you

Questions

Do I need a Google Maps API key?

No. The code uses Google's standard embed address, which works without a key.

How do I add the map to my website?

Paste the code into an HTML or embed block. Website builders such as WordPress, Wix and Shopify all have one.

How do I make the map fit on phones?

Turn on the mobile-responsive option, so the map fills the width of the screen. If you also set a width, it becomes the largest width the map can grow to.

What does the Get directions button do?

It opens Google Maps with directions to your address from wherever the visitor is.

Where does my address go?

The code is built in your browser. Nothing goes to Google until you press Show preview, which loads the map from Google as your website will.