Multiple Google Maps using CMS

[antonyx6 (Antony Xenophontos)]

Hi. I am trying to display Snazzy Google Maps on my contact page using a Collection.

I have it working but only for the first map (expand London):

The other maps are not displaying:

I think because I’m duplicating much of the code and there’s an ID conflict. Not sure of the best way to fix this…

I will eventually link these embeds to pull the latitude and longitude from the CMS, but I’d like to ensure the maps are working first.

FYI I used this post as a guide to get the first map working:

Using Custom Google Map with Color Styles from Snazzy Maps

Hi @ag3nt7 , here is the instructions for making a custom google map, using Snazzy maps styling, with an info window and custom map marker: Step 1: Create a section on your page and give it a unique id of “map” (without the quotes) Give the new map section a height of 500px Step 2: Copy the following code to the HEAD of the Site Settings, this code will fix the google controls so they work on sites which are responsive and the controls won’t get all squished on the page. <style> #…

Preview is here:
Contact

Here is my site Read-Only: [LINK]

[CloudCoder (Fiza Tabassum)]

It looks like the issue is due to ID conflicts since each map must have a unique ID to function properly. Instead of duplicating code with the same ID, dynamically generate unique IDs for each map container and initialize each instance separately. You can achieve this by using a loop to create map instances dynamically for each location stored in your CMS. Also, ensure that the Google Maps API script is only loaded once in your site’s head and that each map is initialized inside the dataset’s onReady function to correctly fetch latitude and longitude from your CMS

[antonyx6 (Antony Xenophontos)]

Thank you for the reply. I thought it might have been the ID.

I tried using GetElementsByClassName (and used a class instead), but that didn’t resolve the issue.

What you’re saying makes sense, but I might struggle to implement that. I’m more of a HTML/CSS man you see.

[CloudCoder (Fiza Tabassum)]

If you want i can assist you to implement it

[antonyx6 (Antony Xenophontos)]

How would we do that?

[memetican (Michael Wells)]

Hey Antony,

Since you’re using a collection list, you can set a different ID for each of your maps by binding it to your collection list slug.

You’d do that on the map element [1] by clicking the little purple button [2]-

And in your code [1] here [2] by using add field [3].
Note you just want to replace the work map you need to keep the single-quotes untouched, and the purple slug indicator will be between the quotes once you’ve added that field to your code.

Since you’re using slugs as ID’s, you’ll want to make certain there are no other ID’s on this page that conflict with your location slugs.

[antonyx6 (Antony Xenophontos)]

Hi Michael, thanks so much for the detailed response.

That worked like a charm!