Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX IFRAME GOOGLE MAPS WITH TRAVEL ROUTE
Need a Google Map with a travel route? This tutorial will show you how to add a Google Map with travel route 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. Add directions to create a route (walking, driving or cycling).
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. Add directions to create a route (walking, driving or cycling).
THE ELEMENTS
The Page
HTML iframe: #html1 (embed Google Maps)
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. Add travel route by clicking "add directions" icon and entering map markers in order
4. Change privacy settings: Click "Share" > Change acces to "Public on the web"
5. Go to Settings > Embed on my site
6. Copy the iframe code to your Wix 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.