{% set DEFAULT_MAP_SETTINGS = {
  className: '',
  pluginOptions: {
    mapOptions: {
      center: [51.505, -0.09],
      zoom: 12,
      maxZoom: 17
    },
    markers: [
      {
        position: [52.505, -0.07],
        title: 'first marker',
        id: 'marker-1'
      }
    ]
  }
} %}

{% macro Map(settings = {}) %}
  {% set settings = merge(DEFAULT_MAP_SETTINGS, settings) %}

  <div class="map {{ settings.className }}" x-data="Map({{ stringify(settings.pluginOptions) }})"></div>
{% endmacro %}