Maps

Interactive maps

Render an interactive map centred on a location:

{{ entry.storeLocation.embed({ height: 360 }) }}

The field’s shapes are drawn too, and the map zooms to fit them. Fields with Show Location Pin turned off (zones, areas) show just their shapes — handy for showing a collection zone or delivery area.

Or build one from scratch with any number of markers:

{{ craft.geomaps.embed({
    id: 'store-map',
    center: { lat: -34.9285, lng: 138.6007 },
    zoom: 11,
    width: 800,
    height: 450,
    markers: stores|map(store => {
        location: { lat: store.storeLocation.lat, lng: store.storeLocation.lng },
        label: store.title,
        color: '#2563eb',
    }),
}) }}

For a map that fills its container, use a CSS width:

{{ entry.storeLocation.embed({ width: '100%', height: 360 }) }}

Shapes are coloured from their color, stroke and fill properties, lines are drawn 4px wide (set a weight property to change any shape’s line width), and a shape with a name or title shows it when clicked — see Map of Areas.

Maps use Google Maps when a Google Maps API Key is set, and Leaflet with your tile provider otherwise. If Google rejects the key, the map falls back to Leaflet automatically.

Option	Description	Default
center	{ lat, lng }, [lat, lng] or an address	the field value (its address, if it has no coordinates)
zoom	Zoom level	the field value’s zoom, or 14
width, height	Size in pixels (800), or a CSS length such as '100%' or '60vh'	640 × 400
markers	List of { location, label, color, icon, html, open }. location is { lat, lng } or an address. See Custom Pins & Info Windows	one marker at the centre
icon	Pin image for every marker: a URL or { url, width, height }	round coloured pin
html	Info window HTML for the centre pin (when there are no markers)	—
id	The map element’s id	random
geoJson	Shapes to draw: GeoJSON as an array or string	the field’s shapes
marker	Show a pin at the centre when no markers are given	true (the field’s Show Location Pin setting)
fitShapes	Zoom to fit the shapes	true
options	Extra options passed to the map library (Leaflet or Google)	{}

Styling the map

Embedded maps are ordinary Leaflet (or Google) maps, so you can style them with CSS. To make OpenStreetMap tiles calmer, so your pins and shapes stand out:

[data-geo-embed] { border-radius: 14px; overflow: hidden; }
[data-geo-embed] .leaflet-tile-pane { filter: saturate(0.35) contrast(0.92) brightness(1.06); }

For a different map style altogether, set Map Tiles URL to another tile provider.

Static map images

Static images come from the Google Maps Static API, so they need a Google Maps API Key with that API enabled. Without one, the methods return null.

{% set src = entry.storeLocation.img({ width: 600, height: 300, zoom: 13 }) %}
{% if src %}
    <img src="{{ src }}"
         srcset="{{ entry.storeLocation.imgSrcSet({ width: 600, height: 300, zoom: 13 }) }}"
         width="600" height="300" alt="Map of {{ entry.title }}">
{% endif %}

Without a field value, use craft.geomaps.img() / craft.geomaps.imgSrcSet() with a center or markers.

Option	Description	Default
center	{ lat, lng }, [lat, lng] or an address	the field value, or the first marker
zoom	Zoom level	14
width, height	Size in pixels	640 × 400
mapType	roadmap, satellite, hybrid or terrain	roadmap
mapId	A Google Cloud map style ID	—
format	png, jpg, …	png
markers	List of { location, label, color }. Labels show their first character	one marker at the centre

imgSrcSet() returns 1x and 2x URLs for high-density screens. Options apply to that one image, so you can call img() several times with different sizes.

Drawing shapes on your own maps

getGeoJsonData() returns the field’s shapes ready to hand to a map library. With Leaflet (load it yourself, or render an embed() on the same page, which loads it):

<div id="area-map" style="height: 400px"></div>
<script>
  const map = L.map('area-map');
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors',
  }).addTo(map);
  const shapes = L.geoJSON({{ entry.storeLocation.getGeoJsonData()|json_encode|raw }}).addTo(map);
  map.fitBounds(shapes.getBounds());
</script>