Vorbly <Code>

CODING MADE EASY WITH VORBLY

HTML IFRAME GOOGLE MAPS WITH MARKERS

Need a Google Map with multiple geolocation markers? This tutorial will show you how to add a Google Map with multiple locations using HTML iframe. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/6

THE ELEMENTS

The Page

Add a HTML iframe to your website.

THE CODE

Generating iframe code

1. Go to Google My Maps

​

2. Add map markers by entering your addresses into the search bar then "+ Add to map"

​

3. Change privacy settings: Click "Share" > Change acces to "Public on the web"

​

4. Go to Settings > Embed on my site

​

5. Copy the iframe code to your website's HTML iframe

​

HTML iframe

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1-YOUR_MAP_CODE" width="960" height="410"></iframe>

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

"+ Add to map" - What do I do with that? Click on it? (I don't see this) Enter it somewhere? (Where?)
Thanks!

Ralf

Apr 29, 2020

0

@Ralf you are meant to add "+ Add to map" to the search query in the search bar

Alek

Oct 05, 2020

0

Thank you very much!

Ahmed Chouihi

Oct 07, 2020

0

@Rafl there is button of "+ Add to map", after clicking on that it will add marker to your map

santosh

Oct 28, 2020

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP