Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX IFRAME GOOGLE MAPS FOR DYNAMIC PAGES
Need to add Google Maps to Wix dynamic pages? This tutorial will show you how to add a Google Map to dynamic pages 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 navigate between dynamic pages, they will be able to see unique Google Maps for each page.
Create a custom map by adding addresses to Google My Map.
THE ELEMENTS
The Page
HTML iframe: #html1 (embed Google Maps)
The Database
Create a database: GoogleMaps (dynamicDataset)
Recommended fields:
-
Google Maps URL: url
-
Page Title: title
-
Other fields for your dynamic pages.
Tip: Use Google My Maps to generate a custom map with url.
The Dynamic Page
Create a dyanmic page: Tours (Title)
Link fields on dynamic page to your database. Do not link Google Maps url directly to your HTML iframe.
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 Google maps url in iframe code to your Wix database
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=Your-Google-Map-Code" width="640" height="480"></iframe>
Page Code
$w.onReady( () => {
$w("#dynamicDataset").onReady( () => {
const itemUrl = $w('#dynamicDataset').getCurrentItem().url;
$w('#html1').src = itemUrl;
});
});
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.