Customizing the map in Twig

Smart Map has been replaced by Google Maps

Please install the Google Maps plugin instead. ➡️

As of February 2021, the Smart Map plugin has been completely rebuilt and replaced with the new Google Maps plugin for Craft CMS. For more details, see here...

---

The documentation below is for historical reference only.

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

• markerOptions accepts any google.maps.MarkerOptions properties
• infoWindowOptions accepts any google.maps.InfoWindowOptions properties

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