Google Maps formatting with a twist!?

Design help General
1

Ello ello everybody!

I have a three part question. I have a client that needs multiple maps in a slider, each formatted with the Snazzymaps code below, all on a custom map with multiple plot marks on it (here: one day : Day One - Resilience - Google My Maps).

How (one earth) does one go about doing that?

Beers owed for the right answer.

Danke.
S

[
{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#444444"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "color": "#f2f2f2"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        },
        {
            "color": "#ea4e60"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
        {
            "color": "#5c5c5c"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "color": "#ffffff"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        },
        {
            "weight": "1.00"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#555555"
        },
        {
            "visibility": "on"
        }
    ]
}
]
2

Not sure if I’m really adressing your issue, but I’ve updated my Maps sandbox page. Go to the end of the page, you’ll see a slider with two custom maps embeded in an HTML widget.

http://sab.webflow.com/widgets/home1406830281325

3

Vincent. thanks alot for all your help.

This really is a great start - my only confusion is how I would go about styling the maps within the Slider - where does one add the corresponding JSON formatting bits!?

Regards. beer owed.

S

4

Oh, ok, I missed things (: You wouldn’t be able to. It’s just pasted code. I don’t think you can do that on the map designer at google maps, too. It’s limited to what you can manually add.

So the answer is the same than for the Vimeo API question: you need a bit of real web development here. By the past we’ve done wonders on Maps, including live websites data (click on the map on this site http://www.australia-australie.com/ and zoom into the map. all the website datas are on it. It’s JS/PHP dev I guess.)

http://vincent.polenordstudio.fr/snap/1er_site_francophone_sur_laustralie__Australia_Australie_2015-03-27_13-01-35.jpg

5

Hi, @samjslater, I am not really sure if you said you already had the snazzymaps setup, but if you just want to add the json you listed, you can add that to the footer of your site, with something like this:

<script>
[
{
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "color": "#444444"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "color": "#f2f2f2"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 45
        },
        {
            "color": "#ea4e60"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels",
    "stylers": [
        {
            "color": "#5c5c5c"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "color": "#ffffff"
        }
    ]
},
{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "simplified"
        },
        {
            "weight": "1.00"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "all",
    "stylers": [
        {
            "color": "#555555"
        },
        {
            "visibility": "on"
        }
    ]
}
]
</script>

Add that to your Footer in the Custom Code tab of your site settings: Custom code in head and body tags | Webflow University

That json will only do something if there is some script looking for it. I hope this helps :slight_smile: Cheers, Dave

6

Oooooooook. Vincent - thanks I appreciate the answers.

You too cyberdave (as always).

Perhaps I could open this up a little then - I can style a single point map easy with the JSON - (http://oddor-test.webflow.com/#map). What I cannot do is get the script in the custom code section to look for the multipoint map that my client has created, as within the script below (what im using currently is the default Snazzmaps Brooklyn Office).

How would I alter the script below to look for the custom map?

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCfNjlO_KzsORQmRbAf5UDw9OJPxlHHk-0"></script>


    <script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);
    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 12, 
            scrollwheel: false,
            scrollwheel:!1,
            mapTypeId:google.maps.MapTypeId.ROADMAP,

            // The latitude and longitude to center the map (always required)
           center:new google.maps.LatLng(52.52741,13.40509), // New York

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles:               [{stylers:[{visibility:"off"}]},{featureType:"road",stylers:[{visibility:"on"},
            {color:"#ea4e60"}]},{featureType:"road.arterial",stylers:[{visibility:"on"},
            {color:"#ea4e60"}]},{featureType:"road.highway",stylers:[{visibility:"on"},
            {color:"#ea4e60"}]},{featureType:"landscape",stylers:[{visibility:"on"},
            {color:"#e0e0e0"}]},{featureType:"water",stylers:[{visibility:"on"},
            {color:"#e0e0e0"}]},{featureType:"poi.park",elementType:"geometry.fill",stylers:[{visibility:"off"},
            {color:"#ea4e60"}]},{elementType:"labels",stylers:[{visibility:"off"}]},
            {featureType:"transit.station",elementType:"labels",stylers:[{visibility:"on"}]},
            {featureType:"transit.station",elementType:"labels.text.fill",stylers:[{visibility:"on"},
            {color:"#e0e0e0"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{visibility:"on"},
            {color:"#e0e0e0"}]},{featureType:"landscape.man_made",elementType:"geometry",stylers:[{weight:.9},{visibility:"off"}]}]








        };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);
    }
</script>

Love.

7

Nudge.

I’m reading the Gmaps API instructions and it all seems to make sense, except I wonder if I must script each position into code, or can I ascribe a “map ID” so my client can alter her map in GMaps and my website will simply reference that, and style accordingly?

Regards,
S