Streaming live at 10am (PST)

Unable to embed Snazzy Maps into Webflow


#1

Hi there,

I'm trying to embed a custom styled google map into my webflow site, I just can't seem to wrap my head around the process, I've tried matching classes in the custom Java Script Style Snazzy maps gives me, but no luck.

Here's the code:

[
{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#e9e9e9"
        },
        {
            "lightness": 17
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#f5f5f5"
        },
        {
            "lightness": 20
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 17
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 29
        },
        {
            "weight": 0.2
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 18
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#ffffff"
        },
        {
            "lightness": 16
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#f5f5f5"
        },
        {
            "lightness": 21
        }
    ]
},
{
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#dedede"
        },
        {
            "lightness": 21
        }
    ]
},
{
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "visibility": "on"
        },
        {
            "color": "#ffffff"
        },
        {
            "lightness": 16
        }
    ]
},
{
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "saturation": 36
        },
        {
            "color": "#333333"
        },
        {
            "lightness": 40
        }
    ]
},
{
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#f2f2f2"
        },
        {
            "lightness": 19
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#fefefe"
        },
        {
            "lightness": 20
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#fefefe"
        },
        {
            "lightness": 17
        },
        {
            "weight": 1.2
        }
    ]
}
]

Any ideas?

My preview link is: https://preview.webflow.com/preview/deluxe-cruises?preview=5237b528d5dd093bb025e4f1b8aa3188

Thanks in advance!

Jamie


#2

Could you try this?