Shared maps allow you to create a link to a map powered by Mapsly and embed it into your WordPress website. If you haven't yet created a shared map please follow this step-by step guide on how to setup your first shared map before continuing reading this article.
There are many ways to embed Mapsly Shared Map into your WordPress website, but the main ones are:
via WP editor
Below you will find the instructions for both of these options.
Embedding in WP editor
To embed a shared map, go to Pages » Add New (or open any existing page) in your WordPress dashboard.
Then, add an HTML block to your page:
Now, you need to paste the shared map iFrame code into this block:
IMPORTANT NOTE: It is important to include the
allow="geolocation; clipboard-read; clipboard-write" attribute in your iFrame if your shared map is configured to center on the user's location, otherwise some browsers may prevent Mapsly from obtaining user's location. Also, this attribute will prevent the copy to clipboard error.
You can use the following format by using the link to your shared map inside the
<iframe src="https://app.mapsly.com/map/a16a374040ec42418e8483f25903f2c8" allow="geolocation; clipboard-read; clipboard-write" style="width: 500px; height: 500px"> </iframe>
You can then preview or publish your page to see the shared map embedded there:
Tip: If you’re using the old classic editor, you can still add iFrame code. You need to do so in the Text view.
Embedding in Elementor
To embed a shared map in Elementor simply search for an available HTML widget and drag it to your page:
Then, add the shared map iFrame code inside that widget:
Contact us 24/7
Mapsly support team is available by chat 24/7, so if you have any questions about shared maps or need help setting them up, contact us.