Styling a Map

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.

It's common for people to use a site like Snazzy Maps to generate a JSON styling for their map. Once you've got a JSON snippet from there, you'll want to apply those styles to your map in JavaScript.

var styles = [...];
smartMap.styleMap('smartmap-mapcanvas-1', styles);

You'll want to delay that JS code until the page has fully loaded.

// Delay with jQuery
$(function () {
    var styles = [...];
    smartMap.styleMap('smartmap-mapcanvas-1', styles);
});

You may also be trying to load this through a Twig template (possibly the same Twig template that's loading your map). In that case, simply wrap your JS with a js tag pair.

{# Load via Twig #}
{% js %}

    // Delay with jQuery
    $(function () {
        var styles = [...];
        smartMap.styleMap('smartmap-mapcanvas-1', styles);
    });

{% endjs %}