Integrating interactive maps with web pages is easy
An embedded map integrates seamlessly with the content of a web page. Visitors to your website can use your map without having to leave the page. All it takes to embed an interactive map is two lines of HTML. It’s just that quick and easy, and as you can see, embedding maps makes a web page come alive. Visitors like seeing images, but they love interactive content.
The two lines of HTML that follow are all it took to embed a tour containing the interactive map below into this website. The first line loads the map and the second line determines where the map will appear on the web page. You can code the two lines together as shown, or put the first line with other script tags and put the second elsewhere in the body of the page.
<script type="module" id="ma-83670" src="https://tour.mapsalive.com/83670/mapsalive-module.js"></script>
<div class="ma-83670"></div>
To embed another tour, just paste-in two more lines of code as shown below.
<script type="module" id="ma-83689" src="https://tour.mapsalive.com/83689/mapsalive-module.js"></script>
<div class="ma-83689"></div>The map of Southwest Harbor above comes from Colby’s Atlas of Hancock County, Maine, 1881. Using historic maps like this a great way to make history come alive. Because you can so easily embed your interactive maps in a web page (like the one you are on right now), just about anyone can create engaging interactive content and use it on their website without having special web developer skills.
The examples above are of two different tours, but you can embed the same tour multiple times if you like. You might do that, for example, to show both floor plans of a two-story home so that visitors to your site can see both at the same time, even though the two maps are in a single tour. See an example of embedding the same tour twice and using the MapsAlive JavaScript API to communicate between them.