<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>

CC BY-SA 4.0
2017-03-27T16:20:49.600Z
2021-01-01T06:50:22.533Z
2021-01-01T06:50:22.533Z
Lindsey D
<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>

<plugins><plugin-smartmap>
How do I add styles or a theme to a Smart Map map?
# 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 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...
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.


---

