Embedding Your Mamap.io Map on Nextjs

Integrate your interactive Mamap.io map into your Nextjs 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 Nextjs Project's Head

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

2. Add the Script to the Head Configuration

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

// pages/index.js

import Head from 'next/head'
import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Head>
        <title>My Next.js Site with Mamap.io Map</title>
      </Head>

      {/* Add the Mamap.io script */}
      <Script
        src="https://mamap.io/api/embed-map/<your-map-id>"
        strategy="afterInteractive"
      />

      <main>
        {/* Container for the Mamap.io map */}
        <div id="map<your-map-id>" style={{ height: '500px', width: '100%' }}></div>
      </main>
    </>
  )
}

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 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.
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.

mamap.io / Nuxt 3

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

CSS examples

Customize the map using CSS