Skip to main content

Adding your maps to a non-WordPress website (or creating standalone maps)

Sometimes you may want to add your map to a non-WordPress website. You can do this by having a WordPress backend for managing your maps and a non-WordPress frontend for displaying them.

Suppose you have a yoursite.com website, with mapsvg installed on it, with the map ID=1.

Copy the shortcode for your map: [mapsvg id=1].

Then add the following HTML iframe to your non-WordPress website:

<iframe 
  src="https://yoursite.com/mapsvg_sc/?mapsvg_shortcode=[mapsvg%20id=1]" 
  class="mapsvg-iframe-responsive"   
  loading="lazy" 
  width="100%" 
  height="400px" 
/>
  • Please note that in the shortocode you have to replace spaces with %20.
  • The iframe must have mapsvg-iframe-responsive class to ensure proper resizing.
  • Replace yoursite.com with your own domain.
  • Replace id=1 with your own MapSVG ID.

Now, if you reload the page, you should see your map. But it is not yet responsive.

To make the map responsive, add the following JS code to your page or into one of the JS files:

function setupIframeResize() {
    function mReceiveMessage(event) {
      const frames = document.querySelectorAll('iframe.mapsvg-iframe-responsive');
      frames.forEach((frame: HTMLIFrameElement) => {
        if (frame.contentWindow === event.source) {
          frame.style.height = event.data.height + "px";
        }
      });
    }

    if (typeof window !== "undefined") {
      window.addEventListener("message", mReceiveMessage, false);
    }
  }

  
setupIframeResize();

Now you should have a responsive map, and if you edit it on the WordPress side, the changes will be reflected on the non-WordPress website.