Media

Map

An OpenStreetMap (free) or Google map with markers.

Live demo

See it in action

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="map mp-0381f03d" data-locations="[{&quot;title&quot;:&quot;New York&quot;,&quot;url&quot;:&quot;&quot;,&quot;thumb&quot;:false,&quot;coordinates&quot;:{&quot;lat&quot;:40.7128,&quot;lng&quot;:-74.006},&quot;description&quot;:&quot;Our North America office.&quot;},{&quot;title&quot;:&quot;London&quot;,&quot;url&quot;:&quot;&quot;,&quot;thumb&quot;:false,&quot;coordinates&quot;:{&quot;lat&quot;:51.5074,&quot;lng&quot;:-0.1278},&quot;description&quot;:&quot;Our Europe office.&quot;},{&quot;title&quot;:&quot;Tokyo&quot;,&quot;url&quot;:&quot;&quot;,&quot;thumb&quot;:false,&quot;coordinates&quot;:{&quot;lat&quot;:35.6762,&quot;lng&quot;:139.6503},&quot;description&quot;:&quot;Our Asia-Pacific office.&quot;}]" data-map-engine="osm" data-map-height="440px" data-disable-scrolling="true" data-osm-style="standard" data-stadia-key="" data-thunderforest-key="" data-maptiler-key="">
		<div class="fw-map-canvas">
		</div>
	</div>
</section>

To learn more about the Map shortcode, please check out the online manual here.