Embedding Your Mamap.io Map on Nuxt 3

Integrate your interactive Mamap.io map into your Nuxt 3 website with just a few simple steps. Follow this guide to add the necessary JavaScript script to your site's <head> and embed the map using a <div> on any page or component.

Step 1: Add the Mamap.io Script to Your Nuxt 3 Project's Head

To ensure your map functions correctly, you need to include the Mamap.io JavaScript script in the <head> section of your Nuxt 3 project.

1. Open `nuxt.config.ts`

Locate and open the nuxt.config.ts file in the root directory of your Nuxt 3 project.

2. Add the Script to the Head Configuration

Modify the app section to include the Mamap.io script within the head property.

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://mamap.io/api/embed-map/<your-map-id>',
          type: 'text/javascript',
          async: true, // Optional: Load the script asynchronously
        },
      ],
    },
  },
});

Step 2: Insert the `<div>` Code:

In the wanted template, paste the following code:

<!-- Container for the mamap.io map -->
<div id="map<your-map-id>" style="height: 500px; width: 100%;"></div>

Step 3: Verify the Map on Your Website

Visit the Page/Post:
- Navigate to the component where you embedded the map.
Check Functionality:
- Ensure the map loads correctly

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.
Map Styling Issues:
- CSS Conflicts: Ensure that other CSS on your site isn't conflicting with the map's styles.
- Responsive Design: Adjust, remove the height and width in the <div> to better fit your site's layout.

mamap.io / WordPress

Load your mamap.io map on your WordPress website effortlessly

mamap.io / Nextjs

Load your Mamap.io map on your Nextjs website effortlessly

mamap.io / Nuxt 3