Help: Dynamic Page Google Maps Locations With Snazzy Maps Theme

Ask the community
,
1

Hi all,

I am putting together a website for a client and have decided to go down the dynamic page route for is ease of use with auto populating pages.

However, the client has asked that each page (which is in this case a separate construction project) has a custom themed map showing the individual location of the project. I decided to use snazzy maps for it’s flexibility and custom icons. The information for these locations would come from the same datasheet that is used to auto populate the other information.

So far I have the map set up on the page using a html frame and it is displaying the default location without a problem. I have trawled through the forum pages and tried to use the code others have suggested to no avail. I cannot get it to reference the datasheet and I am unsure if it is a matter of my lack of knowledge when it comes to code (quite new) or a simple oversight that another pair of eyes might spot.

This is the code I am currently using the in html1 box:


<iframe src="https://snazzymaps.com/embed/124839" width="100%" height="430px" style="border:none;"></iframe>

$w.onReady( function () {
   $w("#CCBProjects").onReady( ()  => {
   		let currentItem = $w("#CCBProjects").getCurrentItem();
		$w("#googleMaps1").location = {
            "latitude": currentItem.latitude,
            "longitude": currentItem.longitude, 
            "description": currentItem.title,
       };
   } );
} );

If it is any help the datasheet is named “CCBProjects” and this is what it looks like on the data sheet:

1267×78 10.5 KB

Thanks in advance,

Dan.

#snazzymaps #mapsdatasheet #googlemaps #dynamicpage #dynamicpagemaps

2

Giving this a bump. Still hoping someone is able to help me out or point me in the right direction.

3

Try simply adding a google map item to your page and the following code (make sure the element ID’s match, mine was “googleMaps3”). That may be a solution without Snazzy maps.

export function googleMaps3_viewportEnter(event) { 

 let item = $w("#CCBProjects").getCurrentItem();
 let lon = item.longitude;
 let lat = item.latitude;
 let name = item.title;
    $w("#googleMaps3").location = {
       "latitude": lat,
       "longitude": lon,
       "description": name,
                              };
    }