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
Create a custom map by adding addresses to Google My Map.
Click "Share" then change access to "Public on the web".
When visitors click on each map marker, they will be able to see location information such as photos, address and reviews.
Create a custom map by adding addresses to Google My Map.
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.
Please complete all required fields.
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