Answers.Body: <p>You'll need to add the styling via <a href="https://plugins.doublesecretagency.com/smart-map/manipulating-the-map-in-javascript/" rel="nofollow noreferrer">JavaScript...</a></p>
  <pre><code>smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});
  </code></pre>
  <p>This can't currently be done in Twig, although I may explore that option in the future.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2017-03-27T16:20:49.600Z
Answers.LastActivityDate: 2021-01-01T06:50:22.533Z
Answers.LastEditDate: 2021-01-01T06:50:22.533Z
Answers.UserDisplayName: Lindsey D
Body: <p>It's probably a syntax issue, but how do I add this Google Map styling code:</p>
  <pre><code>    [
    {
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#f5f5f5&quot;
        }
      ]
    },
    {
      &quot;elementType&quot;: &quot;labels.icon&quot;,
      &quot;stylers&quot;: [
        {
          &quot;visibility&quot;: &quot;off&quot;
        }
      ]
    },
    {
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#616161&quot;
        }
      ]
    },
    {
      &quot;elementType&quot;: &quot;labels.text.stroke&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#f5f5f5&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;administrative.land_parcel&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#bdbdbd&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;poi&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#eeeeee&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;poi&quot;,
      &quot;elementType&quot;: &quot;labels.text&quot;,
      &quot;stylers&quot;: [
        {
          &quot;visibility&quot;: &quot;off&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;poi&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#757575&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;poi.business&quot;,
      &quot;stylers&quot;: [
        {
          &quot;visibility&quot;: &quot;off&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;poi.park&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#e5e5e5&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;poi.park&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#9e9e9e&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;road&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#ffffff&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;road&quot;,
      &quot;elementType&quot;: &quot;labels.icon&quot;,
      &quot;stylers&quot;: [
        {
          &quot;visibility&quot;: &quot;off&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;road.arterial&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#757575&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;road.highway&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#dadada&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;road.highway&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#616161&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;road.local&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#9e9e9e&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;transit&quot;,
      &quot;stylers&quot;: [
        {
          &quot;visibility&quot;: &quot;off&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;transit.line&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#e5e5e5&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;transit.station&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#eeeeee&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;water&quot;,
      &quot;elementType&quot;: &quot;geometry&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#c9c9c9&quot;
        }
      ]
    },
    {
      &quot;featureType&quot;: &quot;water&quot;,
      &quot;elementType&quot;: &quot;labels.text.fill&quot;,
      &quot;stylers&quot;: [
        {
          &quot;color&quot;: &quot;#9e9e9e&quot;
        }
      ]
    }
  ]
  </code></pre>
  <p>to the actual <a href="https://plugins.doublesecretagency.com/smart-map/" rel="nofollow noreferrer">Smart Map</a> code? e.g.</p>
  <pre><code>{% set options = {
      height: 300,
      zoom: 4,
      draggable: false,
      markerInfo: '_includes/mapInfoBubble',
      markerOptions: {
          icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
      },
      infoWindowOptions: {
          maxWidth: 200
      }
  } %}
  
  {{ craft.smartMap.map(locations, options) }}
  </code></pre>
  <p>If I drop the json code into options I just get errors. Any pointers?</p>
  
Tags: <plugins><plugin-smartmap>
Title: How do I add styles or a theme to a Smart Map map?
ThreadText: # How do I add styles or a theme to a Smart Map map?
  
  (Asked by: username_0 on 2017-03-24)
  
  It's probably a syntax issue, but how do I add this Google Map styling code:
  
  ```
      [
    {
      "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"
        }
      ]
    },
    {
      "featureType": "administrative.land_parcel",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#bdbdbd"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#eeeeee"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.text",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#757575"
        }
      ]
    },
    {
      "featureType": "poi.business",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#e5e5e5"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#ffffff"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#757575"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#dadada"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#616161"
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    },
    {
      "featureType": "transit",
      "stylers": [
        {
          "visibility": "off"
        }
      ]
    },
    {
      "featureType": "transit.line",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#e5e5e5"
        }
      ]
    },
    {
      "featureType": "transit.station",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#eeeeee"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#c9c9c9"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9e9e9e"
        }
      ]
    }
  ]
  
  ```
  
  to the actual [Smart Map](https://plugins.doublesecretagency.com/smart-map/) code? e.g.
  
  ```
  {% set options = {
      height: 300,
      zoom: 4,
      draggable: false,
      markerInfo: '_includes/mapInfoBubble',
      markerOptions: {
          icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
      },
      infoWindowOptions: {
          maxWidth: 200
      }
  } %}
  
  {{ craft.smartMap.map(locations, options) }}
  
  ```
  
  If I drop the json code into options I just get errors. Any pointers?
  
  **Tags:** plugins, plugin-smartmap
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-03-27. Score: 2 | Accepted answer
  
  You'll need to add the styling via [JavaScript...](https://plugins.doublesecretagency.com/smart-map/manipulating-the-map-in-javascript/)
  
  ```
  smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});
  
  ```
  
  This can't currently be done in Twig, although I may explore that option in the future.
  
  
  ---
  
  