Please add styleSet example to docs

[darylknight]

This page refers to styling maps: https://plugins.doublesecretagency.com/google-maps/guides/styling-a-map/#styling-a-new-map.

It says "Once you have generated your map styles, copy the JSON snippet and apply it to your map."

But it doesn't show you actually how to apply that JSON to the map. The examples refer to styleSet, but not what that variable might look like. I have a twig variable set to the JSON output from SnazzyMaps, but this just outputs a normal unstyled map:

{% set styleSet = '[{"featureType": "all","elementType": "labels.text.fill","stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},{"featureType": "all","elementType": "labels.text.stroke","stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "all","elementType": "labels.icon","stylers": [{"visibility": "off"}]},{"featureType": "administrative","elementType": "geometry.fill","stylers": [{"lightness": 20}]},{"featureType": "administrative","elementType": "geometry.stroke","stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]},{"featureType": "administrative.province","elementType": "geometry.stroke","stylers": [{"color": "#9bc0e8"},{"gamma": "1.00"},{"weight": "1.58"},{"visibility": "on"}]},{"featureType": "administrative.province","elementType": "labels.text","stylers": [{"visibility": "on"},{"color": "#1a4dc7"}]},{"featureType": "administrative.province","elementType": "labels.text.stroke","stylers": [{"visibility": "on"},{"color": "#ffffff"}]},{"featureType": "administrative.locality","elementType": "labels.text","stylers": [{"visibility": "on"},{"color": "#1a4dc7"},{"weight": "0.07"}]},{"featureType": "administrative.locality","elementType": "labels.text.fill","stylers": [{"visibility": "on"},{"color": "#1a4dc7"}]},{"featureType": "administrative.locality","elementType": "labels.icon","stylers": [{"visibility": "on"}]},{"featureType": "administrative.neighborhood","elementType": "labels.text","stylers": [{"visibility": "on"}]},{"featureType": "landscape","elementType": "geometry","stylers": [{"color": "#efeff2"},{"lightness": "0"}]},{"featureType": "poi","elementType": "geometry","stylers": [{"lightness": 21}]},{"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#dedede"},{"lightness": 21},{"visibility": "off"}]},{"featureType": "poi.park","elementType": "labels.text","stylers": [{"visibility": "off"}]},{"featureType": "road.highway","elementType": "geometry.fill","stylers": [{"color": "#ffffff"},{"lightness": 17}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#c9c9c9"},{"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": "transit","elementType": "geometry","stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},{"featureType": "water","elementType": "geometry","stylers": [{"lightness": "45"},{"color": "#ffffff"}]}]' %}
{% set options = {
  height: 600,
  streetViewControl: false,
  styles: styleSet
} %}

{{ googleMaps.map(locations, options).tag() }}

[darylknight]

Related to #23 , this works:

var map = googleMaps.getMap('map-hardcoded-id');
var styleSet = [{"featureType": "all","elementType": "labels.text.fill","stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},{"featureType": "all","elementType": "labels.text.stroke","stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},{"featureType": "all","elementType": "labels.icon","stylers": [{"visibility": "off"}]},{"featureType": "administrative","elementType": "geometry.fill","stylers": [{"lightness": 20}]},{"featureType": "administrative","elementType": "geometry.stroke","stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]},{"featureType": "administrative.province","elementType": "geometry.stroke","stylers": [{"color": "#9bc0e8"},{"gamma": "1.00"},{"weight": "1.58"},{"visibility": "on"}]},{"featureType": "administrative.province","elementType": "labels.text","stylers": [{"visibility": "on"},{"color": "#1a4dc7"}]},{"featureType": "administrative.province","elementType": "labels.text.stroke","stylers": [{"visibility": "on"},{"color": "#ffffff"}]},{"featureType": "administrative.locality","elementType": "labels.text","stylers": [{"visibility": "on"},{"color": "#1a4dc7"},{"weight": "0.07"}]},{"featureType": "administrative.locality","elementType": "labels.text.fill","stylers": [{"visibility": "on"},{"color": "#1a4dc7"}]},{"featureType": "administrative.locality","elementType": "labels.icon","stylers": [{"visibility": "on"}]},{"featureType": "administrative.neighborhood","elementType": "labels.text","stylers": [{"visibility": "on"}]},{"featureType": "landscape","elementType": "geometry","stylers": [{"color": "#efeff2"},{"lightness": "0"}]},{"featureType": "poi","elementType": "geometry","stylers": [{"lightness": 21}]},{"featureType": "poi.park","elementType": "geometry","stylers": [{"color": "#dedede"},{"lightness": 21},{"visibility": "off"}]},{"featureType": "poi.park","elementType": "labels.text","stylers": [{"visibility": "off"}]},{"featureType": "road.highway","elementType": "geometry.fill","stylers": [{"color": "#ffffff"},{"lightness": 17}]},{"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{"color": "#c9c9c9"},{"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": "transit","elementType": "geometry","stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},{"featureType": "water","elementType": "geometry","stylers": [{"lightness": "45"},{"color": "#ffffff"}]}];
googleMaps.getMap('map-hardcoded-id').styles(styleSet);

But it breaks if I try to set the ID of the map based on the block ID.

[darylknight]

Might also be worth noting that if you're using the {% js %} tag from Craft, you need to add {% js on load %} so that the map styling code loads after the Google Map/

[lindseydiloreto]

We might be mixing a few different issues together here...

Per the original issue... you are providing the JSON as a string, whereas it needs to be passed as a JSON-formatted array/object. Looks like you fixed that in your second comment. Regarding the dynamic block ID, we'll leave that discussion contained to #23.

I'll add a little more info to the documentation to help clarify the proper format for styleSet. And thanks for the heads up about {% js on load %}, I'll make a note of that too!

[darylknight]

Thanks Lindsey. You were right about the original issue; I got this fixed by using an actual array rather than a string. The docs do actually say this, the error's on my side for not realising you could create a twig variable formatted as JSON.

As for the on load - I should provide some more clarification for that. Due to the load orders, the only way I could get it working was to use {% js on load %}. However, I later realised that that broke other elements on the site, because when you use on load, Craft injects it's own version of jQuery into the site and broke our navigation. Because of that, I ended up taking the styling out of javascript entirely, and did it with Twig. Final code ended up being:

{% set snazzyMapJson = [{featureType: 'all',elementType: 'labels.text.fill',stylers: [{saturation: 36},{color: '#333333'},{lightness: 40}]},{featureType: 'all',elementType: 'labels.text.stroke',stylers: [{visibility: 'on'},{color: '#ffffff'},{lightness: 16}]},{featureType: 'all',elementType: 'labels.icon',stylers: [{visibility: 'off'}]},{featureType: 'administrative',elementType: 'geometry.fill',stylers: [{lightness: 20}]},{featureType: 'administrative',elementType: 'geometry.stroke',stylers: [{color: '#fefefe'},{lightness: 17},{weight: 1.2}]},{featureType: 'administrative.province',elementType: 'geometry.stroke',stylers: [{color: '#9bc0e8'},{gamma: '1.00'},{weight: '1.58'},{visibility: 'on'}]},{featureType: 'administrative.province',elementType: 'labels.text',stylers: [{visibility: 'on'},{color: '#1a4dc7'}]},{featureType: 'administrative.province',elementType: 'labels.text.stroke',stylers: [{visibility: 'on'},{color: '#ffffff'}]},{featureType: 'administrative.locality',elementType: 'labels.text',stylers: [{visibility: 'on'},{color: '#1a4dc7'},{weight: '0.07'}]},{featureType: 'administrative.locality',elementType: 'labels.text.fill',stylers: [{visibility: 'on'},{color: '#1a4dc7'}]},{featureType: 'administrative.locality',elementType: 'labels.icon',stylers: [{visibility: 'on'}]},{featureType: 'administrative.neighborhood',elementType: 'labels.text',stylers: [{visibility: 'on'}]},{featureType: 'landscape',elementType: 'geometry',stylers: [{color: '#efeff2'},{lightness: '0'}]},{featureType: 'poi',elementType: 'geometry',stylers: [{lightness: 21}]},{featureType: 'poi.park',elementType: 'geometry',stylers: [{color: '#dedede'},{lightness: 21},{visibility: 'off'}]},{featureType: 'poi.park',elementType: 'labels.text',stylers: [{visibility: 'off'}]},{featureType: 'road.highway',elementType: 'geometry.fill',stylers: [{color: '#ffffff'},{lightness: 17}]},{featureType: 'road.highway',elementType: 'geometry.stroke',stylers: [{color: '#c9c9c9'},{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: 'transit',elementType: 'geometry',stylers: [{color: '#f2f2f2'},{lightness: 19}]},{featureType: 'water',elementType: 'geometry',stylers: [{lightness: '45'},{color: '#ffffff'}]}] %}

{% set options = {
  id: 'map-filterable',
  height: 600,
  infoWindowTemplate: '_includes/mapInfoBubble',
  styles: snazzyMapJson
} %}

{% set map = googleMaps.map(locations, options) %}

{# more code here for styling the markers #}

{{ map.tag() }}

[lindseydiloreto]

Sounds good, glad you got it sorted out. Looks like that's the best solution. 👍