Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Loading a map

Web SDK v4: Loading a map

Follow this 5-minute guide to embed a Mappedin map onto your website with Mappedin Web SDK v4.

Display a Map

Setup HTML

Load the Mappedin Web SDK stylesheet, add styles for the map div and create the element where the map will be rendered

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mappedin v4</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link
rel="stylesheet"
href="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.css"
/>
<style>
body,
html,
#mappedin-map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="mappedin-map"></div>
<script type="module" src="main.js"></script>
</body>
</html>
main.js
import { getVenue, showVenue } from "https://d1p5cqqchvbqmy.cloudfront.net/websdk/v4.0.8/esm/renderer/index.js";
async function init() {
const venue = await getVenue({
venue: "mappedin-demo-mall",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
});
const mapView = await showVenue(
document.getElementById("mappedin-map"),
venue
);
}
document.addEventListener("DOMContentLoaded", init);

Demo keys are available on Trial API Keys page with Terms and Conditions for their use

Result

This is what you will get!

At this point the map is rendered and you can zoom, rotate and tilt the map. In the next guide, we will add interactivity to the map.

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy