Skip to main content

Embedding a Map in HTML

Get A Map Embed Code​

It's easy to embed a map created in the Mappedin Map Editor into any web page. Follow the steps below to copy a embed map code snippet.

  1. Log into the Mappedin Map Editor.

  2. Open the map to embed.

  3. Click on the Preview button. The Copy Embed button

  4. Click on the "Share" button.

  5. If the map is in Draft status, use the drop down to change it to Live.

    6. The Copy Embed button

  6. Click on the "Copy Embed" button.

    The Copy Embed button

    The code to embed the map has now been copied to the clipboard.

Embed the Map Code​

  1. Open the HTML file with any text editor (e.g., Notepad, VSCode)
  2. Paste the embed code. Insert the copied <iframe> code into the desired location within the <body> of the HTML file. Example:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Embedding a Mappedin Map in HTML</title>
	</head>
	<body>
		<h1>Welcome to Our Location</h1>
		<p>Check out our map below:</p>
		<!-- Mappedin Embed Code -->
		<iframe
			href="https://www.mappedin.com/"
			title="Mappedin Map"
			name="Mappedin Map"
			allow="clipboard-write; web-share"
			scrolling="no"
			width="100%"
			height="650"
			frameborder="0"
			style="border:0"
			src="https://app.mappedin.com/map/6679882a8298d5000b85ee89?embedded=true"
		>
		</iframe>
	</body>
</html>

When embedding the viewer, the iframe should allow the following permissions, which were used in the example above:

Example Output: