Embeddingthemap

mamap.io / WordPress

Load your mamap.io map on your WordPress website effortlessly

Embedding Your Mamap.io Map on WordPress

Integrate your interactive Mamap.io map into your WordPress website with just a few simple steps. This guide will help you add the necessary JavaScript script to your site's <head> and embed the map using a <div> on any page or post.

Step 1: Add the Mamap.io Script to Your WordPress Site's Header

To ensure your map functions correctly across your website, you need to include the Mamap.io JavaScript script in the <head> section of your WordPress site.

  1. Install and Activate the "Insert Headers and Footers" Plugin:
    • Go to your WordPress dashboard.
    • Navigate to Plugins > Add New.
    • Search for "Insert Headers and Footers" by WPBeginner (other plugins will also work).
    • Click Install Now, then Activate.
  2. Add the Script to the Header:
    • After activation, go to Settings > installed plugin.
    • In the Scripts in Header box, paste the following script:
      <script src="https://mamap.io/api/embed-map/<your-map-id>"></script>
    • Click Save to apply the changes.

Manually Editing the Theme (Alternative Method)

Note: This method involves editing theme files. It's recommended to use a child theme to prevent changes from being overwritten during updates.

  1. Access Theme Editor:
    • From your WordPress dashboard, go to Appearance > Theme Editor.
    • Select the header.php file from the list on the right.
  2. Insert the Script:
    • Locate the closing </head> tag.
    • Just before </head>, paste the following script:
      <script src="https://mamap.io/api/embed-map/<your-map-id>"></script>
  3. Update the File:
    • Click Update File to save your changes.

Step 2: Embed the Map Using a <div> on a Page or Post

Now that the script is added to your site's header, you can embed the map on any page or post using a simple <div> with a specific id.

Using the Gutenberg Block Editor

  1. Create or Edit a Page/Post:
    • Navigate to Pages > Add New or Posts > Add New.
    • Alternatively, edit an existing page or post where you want the map to appear.
  2. Add a Custom HTML Block:
    • Click the + icon to add a new block.
    • Search for and select the Custom HTML block.
  3. Insert the <div> Code:
    • In the Custom HTML block, paste the following code:
      <!-- Container for the mamap.io map -->
<div id="map<your-map-id>" style="height: 500px; width: 100%;"></div>
  4. Preview the Map:
    • Click the Preview button to ensure the map displays correctly.
  5. Publish/Update the Page/Post:
    • Once satisfied, click Publish (for new pages/posts) or Update (for existing ones) to make the map live.

Using the Classic Editor

  1. Create or Edit a Page/Post:
    • Go to Pages > Add New or Posts > Add New.
    • Or edit an existing page/post.
  2. Switch to Text Mode:
    • In the editor, switch from the Visual tab to the Text tab to enter HTML mode.
  3. Insert the <div> Code:
    • Paste the following code where you want the map to appear:
      <!-- Container for the mamap.io map -->
<div id="map<your-map-id>" style="height: 500px; width: 100%;"></div>
  4. Switch Back to Visual Mode (Optional):
    • You can switch back to the Visual tab to see a placeholder for the map.
  5. Publish/Update the Page/Post:
    • Click Publish or Update to make the map live on your website.

Step 3: Verify the Map on Your Website

  1. Visit the Page/Post:
    • Navigate to the page or post where you embedded the map.
  2. Check Functionality:
    • Ensure the map loads correctly with all interactive features like the search bar and custom markers functioning as expected.

Troubleshooting

  • Map Not Displaying:
    • Verify Script URL: Ensure the script URL in the <head> section is correct.
    • Check for JavaScript Errors: Open your browser's developer console to look for any errors.
    • Clear Cache: Sometimes, caching plugins may prevent the latest changes from appearing. Clear your site's cache.
  • Map Styling Issues:
    • CSS Conflicts: Ensure that other CSS on your site isn't conflicting with the map's styles.
    • Responsive Design: Adjust the height and width in the <div> to better fit your site's layout.

Conclusion

Embedding your Mamap.io map into your WordPress website is a straightforward process that enhances your site's interactivity and visual appeal. By following these simple steps, you can display dynamic maps with search functionality and custom markers, providing an engaging experience for your visitors.

mamap.io / Vanilla Javascript

Load your map with pure html and js

mamap.io / Nuxt 3

Load your Mamap.io map on your Nuxt 3 website effortlessly