This guide provides a step-by-step walkthrough for adding a MapCosmos widget to your Craft CMS website.
Log into your MapCosmos dashboard, open your widget, and select Installation Code from the settings. Copy the script + <div> snippet that is generated for you.
Example:
<script type="text/javascript" src="https://widget.mapcosmos.com/map-widget.js?key=WIDGET_KEY" async></script>
<div id="map-cosmos-map-widget"></div>
Finally, publish the entry under Entries → Store Locator.
Because Craft strips scripts from rich text fields, you’ll need to place the embed in a Twig template (or partial) instead.
Next, create the template file:
templates/store-locator.twig
{% extends "_layouts/base" %}
{# use your site’s layout if applicable #}
{% block content %}
<h1>Find a Store</h1>
<script type="text/javascript" src="https://widget.mapcosmos.com/map-widget.js?key=WIDGET_KEY" async></script>
<div id="map-cosmos-map-widget"></div>
{% endblock %}
Finally, publish the entry under Entries → Store Locator.
If you want to show the locator on multiple pages:
Then include it wherever needed:
{% include "_partials/store-locator" %}
✅ Locate your nearest stores in seconds
✅ Get directions on desktop or mobile
✅ Filter results by service, category, or product
✅ View rich details like hours, parking, or downloadable brochures
✅ Connect with your brand both online and offline
🚀 Try MapCosmos free today and give your Craft CMS site a store locator that is fast, flexible, and fully customizable.
Quick fixes if something doesn’t work