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

Community resources Webflow Tips
18

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