Map

<div class="c-element openstreetmap" data-js-map-markers="[]" data-js-map-lat="56.046467" data-js-map-lng="12.694512" data-js-map-zoom="11" data-js-map-style="default" data-js-map="map_6aaf3c5bf0b83"
data-js-map-provider="openstreetmap" style="position: relative; height: 600px; width: 100%;" data-component="element">
  <div class="c-element" style="position: unset; height: 600px; width: 100%; background: #f0f0f0;" id="map_6aaf3c5bf0b83" data-component="element">
    <!-- Map -->
  </div><!-- Map Container -->
</div>

@map([
	'lat' => 56.046467,
	'lng' => 12.694512,
	'zoom' => 11,
	'provider' => 'openstreetmap',
	'mapStyle' => 'default',
	'height' => '600px',
])
@endmap

<div class="c-element openstreetmap" data-js-map-markers=
"[{&quot;lat&quot;:56.046467,&quot;lng&quot;:12.694512,&quot;content&quot;:&quot;Helsingborg C&quot;,&quot;icon&quot;:&quot;train&quot;,&quot;color&quot;:&quot;#005C8A&quot;},{&quot;lat&quot;:56.050642,&quot;lng&quot;:12.701319,&quot;content&quot;:&quot;Stortorget&quot;,&quot;icon&quot;:&quot;location_on&quot;,&quot;color&quot;:&quot;#E04A39&quot;},{&quot;lat&quot;:56.044923,&quot;lng&quot;:12.689227,&quot;content&quot;:&quot;K\u00e4rnan&quot;,&quot;icon&quot;:&quot;museum&quot;,&quot;color&quot;:&quot;#3B7A57&quot;}]"
data-js-map-lat="56.046467" data-js-map-lng="12.694512" data-js-map-zoom="13" data-js-map-style="default" data-js-map="map_6aaf3c5bf0d59" data-js-map-provider="openstreetmap" style=
"position: relative; height: 600px; width: 100%;" data-component="element">
  <div class="c-element" style="position: unset; height: 600px; width: 100%; background: #f0f0f0;" id="map_6aaf3c5bf0d59" data-component="element">
    <!-- Map -->
  </div><!-- Map Container -->
</div>

@map([
    'lat' => 56.046467,
    'lng' => 12.694512,
    'zoom' => 13,
    'provider' => 'openstreetmap',
    'mapStyle' => 'default',
    'height' => '600px',
    'markers' => [
        [
            'lat' => 56.046467,
            'lng' => 12.694512,
            'content' => 'Helsingborg C',
            'icon' => 'train',
            'color' => '#005C8A',
        ],
        [
            'lat' => 56.050642,
            'lng' => 12.701319,
            'content' => 'Stortorget',
            'icon' => 'location_on',
            'color' => '#E04A39',
        ],
        [
            'lat' => 56.044923,
            'lng' => 12.689227,
            'content' => 'Kärnan',
            'icon' => 'museum',
            'color' => '#3B7A57',
        ],
    ],
])
@endmap

<div class="c-element openstreetmap" data-js-map-markers="[]" data-js-map-lat="56.046467" data-js-map-lng="12.694512" data-js-map-zoom="12" data-js-map-style="dark" data-js-map="map_6aaf3c5bf0ebe"
data-js-map-provider="openstreetmap" style="position: relative; height: 600px; width: 100%;" data-component="element">
  <div class="c-element" style="position: unset; height: 600px; width: 100%; background: #f0f0f0;" id="map_6aaf3c5bf0ebe" data-component="element">
    <!-- Map -->
  </div><!-- Map Container -->
</div>

@map([
    'lat' => 56.046467,
    'lng' => 12.694512,
    'zoom' => 12,
    'provider' => 'openstreetmap',
    'mapStyle' => 'dark',
    'height' => '600px',
])
@endmap

<div class="c-element openstreetmap" data-js-map-markers=
"[{&quot;lat&quot;:56.046467,&quot;lng&quot;:12.694512,&quot;content&quot;:&quot;Compact view example&quot;,&quot;icon&quot;:&quot;place&quot;,&quot;color&quot;:&quot;#7A1FA2&quot;}]"
data-js-map-lat="56.046467" data-js-map-lng="12.694512" data-js-map-zoom="14" data-js-map-style="pale" data-js-map="map_6aaf3c5bf0ffd" data-js-map-provider="openstreetmap" style=
"position: relative; height: 320px; width: 100%;" data-component="element">
  <div class="c-element" style="position: unset; height: 320px; width: 100%; background: #f0f0f0;" id="map_6aaf3c5bf0ffd" data-component="element">
    <!-- Map -->
  </div><!-- Map Container -->
</div>

@map([
    'lat' => 56.046467,
    'lng' => 12.694512,
    'zoom' => 14,
    'provider' => 'openstreetmap',
    'mapStyle' => 'pale',
    'height' => '320px',
    'markers' => [
        [
            'lat' => 56.046467,
            'lng' => 12.694512,
            'content' => 'Compact view example',
            'icon' => 'place',
            'color' => '#7A1FA2',
        ],
    ],
])
@endmap