Embed Dynamic Maps

With Maps you can quickly and easily output an interactive map using one of two templating methods. The first is via a Map field, and the second is using the global map variable.


The available options include those from the Static Map as well as two additional options:

  • id - The ID to use when creating the map (using in JavaScript and on the HTML tag).
  • options - An object of options that will be passed to the JavaScript, allowing you to customise the map according to the map library being used.

From a Map field

Both of the below embed methods will return a div tag with the given (or generated) ID, and will include the necessary JavaScript and CSS to render the map. They both accept an options object as their only parameter.


To render a dynamic map from a Map field, use the embed method on the fields value. The center and zoom options will be ignored, since their values are gathered from the Map field's value.

{{ myMapField.embed({
    id: 'map',
    markers: [{}],
}) }}


{{ craft.maps.embed({
    center: 'Maidstone, UK',
    options: {
        disableDefaultUI: true,
        draggable: false,
}) }}

Additional attributes

If you want to add additional attributes to the output div from the embed methods you should do so using Craft's built-in |attr filter.

{{ myMapField.embed()|attr({
    class: 'map',
}) }}

Libraries & Caveats

Google Maps

The Google Maps service uses Google's Maps JavaScript library. You can view the options that you can pass to options.options here.


  • Google Maps doesn't support coloured markers.

Apple Maps

Apple Maps uses the Mapkit JS library. You can view the options here.


Mapbox uses Mapbox. You can view the options here.


  • Mapbox doesn't support marker labels.


Here uses Here. You can view the options here.


Wikimedia, OSM, and Carto all use Leaflet JS. You can view the options here.