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](https://maker.mappedin.com/) into any web page. Follow the steps below to copy a embed map code snippet. 1. Log into the [Mappedin Map Editor](https://maker.mappedin.com/).

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.

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>

Example Output: