Mappedin Minimap

Mappedin Minimap provides a static map, zoomed in on a specific location. It is designed to work in tandem with Mappedin's Responsive Web App. If configured properly, clicking on the minimap will link the user to the Mappedin Web location page. Additional functionality may be added via miOpenFullMap(), as described below.

Integration

The following snippets are all that are necessary to include a minimap on your page. Add the div element in the appropriate position in your HTML document.

<div id="mappedin-minimap"></div>

Include the below scripts to configure and download the Mappedin Minimap script.

<script type="text/javascript"> 
  window.mappedin = {
    clientId: "<Your key here>",
    clientSecret: "<Your secret here>",
    venue: "mappedin-demo-mall",
    locationId: "Momo",
    fullMapUrl: "<Your Mappedin Web page here>"
    webAppVersion: "v2"
  };
</script>
<script src="https://d1p5cqqchvbqmy.cloudfront.net/minimap/release/minimap.js" type="text/javascript"></script>

Simply include the above snippets on your page, and supply the necessary properties to the window.mappedin object as provided to you.

Styling

The minimap will take up the entire space of it's parent container, so we recommend putting the above snippets in a wrapping container, and styling that container to control position and size of the minimap instead of the minimap element itself.

Optional attributes and functionality

lang to get text labels in a certain language (if available).
dataKey if you want to use a property other than externalId for the locationId (for example, x_urlFriendlyName).
zoom to set a custom map zoom level. The default zoom value is 2.0, where larger values zoom out further from the map.
webAppVersion to specify the version of Mappedin Web you are linking to. This can either be v1 or v2. If not specified or invalid, we attempt to detect this based on the "Apollo Version" field in the Venue Settings in CMS.

When the Minimap is tapped, it calls the window.miOpenFullMap() function. If you would like to add your own button, you may call this function. You can also make deep linking easier via a 'View on Map' button or link elsewhere on the page.

An example of fullMapUrl would be https://demos-ssl.mappedin.com/web/v2/demos/mappedin-demo-mall.html#/.

Example

Frequently Asked Questions

How do I display location names on the map?

Ask Mappedin to enable Floating Labels for your venue to display the location name label on the minimap.