Styled Google Maps from CMS Collection with Multiple (over 100) Overlapping Markers and Dynamic Info Windows

oh and you don’t need to have your collection inside the google maps element - you can have it as a separate element and hidden - like this:

Ahhh okay, thank you!! yeah this picture helps a lot that was a little unclear.

  1. So i took the embed outside of the google maps element. Fixed the code issue by changing:
<div class="imgMap" (i took this right from your code so maybe update this since webflow doesn't have a code verifier) to
or should it be
  1. made all the coordinates XX.XXX like in your example (like 54.234)
  2. in the embed i fixed the slug part

Maybe it will take some time but as of now it’s still not working… same url.

I appreciate your help, I’m pretty certain i followed everything else you said exactly so I’m not sure if inspecting the html will give us any hints as to why it’s not working?

Ok, so it look like you still have an issue inside the embed… if you will look closely you are not using consistent “quote” simbols on all the parts of the script, and as a result if you look even closer you will see that the text of the ‘name’ is green but the following line its yellow - that means that there is an error - replace all the quote (single or double) marks with same one - it must be all consistent throughout. all text elements (name, discription lat lang etc…) must be green.

Also, you copied the actual links to the icons that represent the markers from my script - i think it might be an issue - so you should try finding markers that you want to use - any svg will do - then upload them to your website (the same way you upload any other assets). and then copy the link to your asset in the relevant place of the script - I talked about this in my tutorial…

try those steps see if it starts working…

You’re awesome. Seriously… It works!!! I’m so excited. Thank you so much. Don’t hesitate to hit me up if you ever need any sort of design or business help! I would love to return the favor.

Glad I could help! So it’s all working as expected?

Yeah it connects with the cms and displays the info. The next steps are seeing if I can style the popup a bit, and then the final thing I’d like to do is set up some filters that limit the pins that show up… or would you reccomend just having multiple CMSs to do this? Let you know if I break it trying to do that lol.

@IVG is awesome!!! Thank you so much!

1 Like

I’ve got it working too! Awesome!

Some bugs indeed appeared when copy-pasting the code for the html-embed.
The ’ (quotes) transformed into opening/closing quotes, not regular ones.

Also i had to close the first div with an > and also close it in the end with < /div >, to properly get it to work.

<div class="imgMap">
<script>
imgs.push ({
  'name'  : '[name]',
  'slug'  : '{{slug}',
  'url'   : 'https://website.url/[slug]',
  'description'  :  '[description]',
  'photo'   : '[photo]',
  'lat'   : '[latitude#]',
  'lng'   :  '[longitude#]',
});
</script>
</div>

And even though i’m using numbers in my Collection, i still do need to use the lat/lon conversion with:

lng: parseFloat(imgMap.lng),
lat: parseFloat(imgMap.lat),

I do have a question: How can i remove the spider-combine thing properly, if i just want to show all the icons?

Please clarify what do you mean by removing the spiderfier? as a script alltogether? and what do you mean by showing all the icons? - you mean that you don’t have any overlapping icons? which icons you want to show - the original google one’s or the custom ones?

Hi IVG,

I’d like to use the custom icons.
I would even like a second set of icons, because i have 2 types of locations that ideally should have 2 different icons.

However, when you zoom in and out, with your script, the icons ‘pop’ (suddenly increase/decrease in size) - i’d like that removed and the combining of icons.

But i do like your approach of being able to show more than 100 items, which is what i need.

There’s another tutorial on this that does have smooth icon transitions (well rather, the icons simply stay the same size) - check: Google Maps JavaScript API - CMS map with multiple locations

I hope i can use your script, but i need your help removing the spider thing.

And one more question: Is there a way to change the minimum distance 2 (or more) icons should be apart before “spiderfing”? I’ve increased the size of the icons, and now that feels weird.

Also - i think i’d like to have 2 options instead of 3.
Actual icons or the spiderfied + icons (to expand a location).
Currently icons that are close together, also show as special icons, and when clicked they move apart so you can more easily select each. Nice idea, but I don’t like this unfortunately.

BTW: If you would like to style a map on https://mapstyle.withgoogle.com/
You’ll get a JSON script like:

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
]

If you put this in the var map = new google.maps.Map, make sure to disable the mapTypeId: like //mapTypeId: ‘satellite’.

Then this does also work :smiley:

1 Like

Firstly, if you like the other script why not use it? - its perfectly workable…

The trick for having more than 100 items is to have multiple CMS collection on the page and having them display only part of your CMS collection each (see Step 2) – you just have to make sure that they have same names. Also, you have to set the collection up so that first displays you cms items 1-100 second one 101-200 and so on…

if you chose to use Siderfy script then you should look at its api to get an idea on how to further customize it.

Finally, I am not sure why your icons pop… try testing different browsers and in incognito mode - I don’t have this behavior…

P.S. you can also clone this page and I think it has a working script like you wanted…

Hi IVG,

The other script says nothing about multiple collections (like you do with 1-100, 101-200 etc). I need that because i have over 400 pins to put on the map :). Perhaps i can do the same trick with the other script.

Spiderfy is nice, and i would like to keep it, but that poppin is something that is there. I’m on a clean Chrome install (windows) and also Firefox and Microsoft browsers have this. (The fancy demo on the Spiderfy website is the only one that does it right).

So i think i should tinker with the spiderfy script and/or remove it somehow with the other script as a simpler example.

I’ll let you know if it works out !

@icexuick

multiple collections has nothing to do with the script - all it does is that it gets around the 100 items per collection limitation - so if the script works with one collection then it will work with more on the page… so if the other script works for you (and you can clone his page and test it) it will work when you will put multiple collections on the page…

All right! Thanks.
I do however like your approach.
Thanks for writing this tutorial!

It’s quite the tinkering but i’m getting there, combining your script with the other script.
I’m still not happy (enough) though.

I have one more question about your map and the spidersystem.
The spider icons have a problem - they aren’t updated when zoomed in or out.
So when zooming in, the + symbols will remain visible, even though there are not spiderfied.
And when zooming out, the clickable icons, will stay the same and do not change into spiderfied + symbols.

Would you perhaps know anything about that?

can you provide a read only link and the published link to the page you r making and I will have a look… also did you upload the icons to your webflow project or you are using external hosting for the icon images?

Hi IVG
I have a similar case and trying to learn from your posting.
I am not an expert and it is my first time building a website…
I am stuck in step 2 "Inside the “galleryItem” div, place an “HTML Embed”.
I can not place HTML embed inside the galleryItem. How did you do it?
Looking forward to hearing from you.
And thanks a lot for sharing your experience! :slight_smile:
Screen Shot 2022-09-26 at 21.41.11

@Sol Hi!

I am not sure why you can’t but normally, you can just drag the embed into the galleryItem… if you provide a readOnly link I can try and have a look