Smart Map

Documentation  •  Changelog


Render a map in Twig

How to draw a map using Twig

Create a map with either a single marker or a multiple markers. The map can be either dynamic or static.

Dynamic map:

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

A dynamic Google map, capable of being completely customized either before it's rendered (via the "options" parameter) or after it's rendered (via ordinary front-end JavaScript).

Static map:

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

A static Google map. A static map can only be customized before it's rendered (via the "options" parameter).

If needed, you can also directly get only the URL for a static map:

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


  • locations - An individual address or element, or an array of elements (see below)
  • options - View the full list of options. The options value must be an object, a set of key/value pairs.

The "locations" value can be in any of the following formats:

As an individual fieldentry.address
As an individual elementcraft.entries.slug('my-entry').one()
As an array of elementscraft.entries.section('myLocations').all()
As an ElementCriteriaModelcraft.entries.section('myLocations')


Since a static map can't dynamically calculate a width or height, the image will be set to 200px by 200px by default. This can be easily overridden in the "options" parameter.