Customizing the map in Twig

Use JS for styles

Need to apply styles to your map? Use JavaScript instead...

Due to the inherent complexity of map styles, that value should be applied directly in JS.

You can customize your map before rendering it by simply passing in an options parameter. The options value must be an object, a set of key/value pairs:

{% set options = {
    height: 300,
    zoom: 4,
    draggable: false,
    markerInfo: '_includes/mapInfoBubble',
    markerOptions: {
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
    },
    infoWindowOptions: {
        maxWidth: 200
    }
} %}

{{ craft.smartMap.map(locations, options) }}

Here's the magical part... You can pass in corresponding options defined in the Google Maps API:

# Map Options

Standard options from google.maps.MapOptions can be set in the root of your options object, alongside any custom options like id, width and height...

{% set options = {
    height: 300,
    mapTypeId: 'google.maps.MapTypeId.HYBRID'
} %}
Options Type Default Description
id string "smartmap-mapcanvas-1" Set id attribute of container
width int null Width of map (in px)
height int null Height of map (in px)
zoom int (uses fitBounds) Zoom level (1 - 16)
center array (uses fitBounds) Map center, ie: {'lat':38.897837, 'lng':-77.036512}
scrollwheel bool false Whether scroll wheel will zoom map
markerInfo string null Template path (read more)
markerOptions object null Accepts any google.maps.MarkerOptions properties
infoWindowOptions object null Accepts any google.maps.InfoWindowOptions properties
maptype string "roadmap" Type of map ("roadmap", "satellite", "hybrid", "terrain")
(Applies to static maps only)
scale string 2 1 = Non-retina
2 = Retina
(Applies to static maps only)
field string or array null Specific field(s) to be included on map

# Marker Options & Info Window Options

Custom marker options and info window options can be set using the markerOptions and infoWindowOptions parameters:

{% set options = {
    markerOptions: {
        icon: {
            url: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
            scaledSize: 'new google.maps.Size(32,32)'
        }
    },
    infoWindowOptions: {
        maxWidth: 200
    }
} %}

These settings will affect all markers and info windows on the map. You can also customize after the map has been rendered...