Mappedin Minimap has been deprecated. Use Mappedin Web and provide it with a location as a URL parameter to zoom to a specific location. Refer to the Mappedin Web v2 Guide for more information.
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. Clicking on the Minimap will link the user to the location profile within the Mappedin Web App. This guide demonstrates how to configure and integrate Minimap with a web page.
Integration
The following HTML snippets are all that are necessary to include Minimap on a page.
Add a div
element with an id of mappedin-minimap
in the appropriate position in the HTML document.
<div id="mappedin-minimap"></div>
Include the below scripts to configure and download the Mappedin Minimap on page load.
<script type="text/javascript"> window.mappedin = { clientId: "<Mappedin Key>", clientSecret: "<Mappedin Secret>", venue: "<Unique Venue Identifier", locationId: "<locationId | externalId>", fullMapUrl: "<Map Page URL>" webAppVersion: "v2" };</script><script src="https://d1p5cqqchvbqmy.cloudfront.net/minimap/release/minimap.js" type="text/javascript"></script>
With the above snippets in the document, Minimap should initialize within the mappedin-minimap
element. To read about each of the above properties in window.mappedin
, see Required Properties.
Example
Required Properties
The following properties are required in the window.mappedin
configuration. Without them Minimap will fail to initialize.
clientId
is the Mappedin Web key for the venue.clientSecret
is the Mappedin Web secret for the venue.venue
is the unique identifier for the venue.locationId
is the identifier for the location. Must be eitherlocationId
orexternalId
unless modified by the optionaldataKey
property.fullMapUrl
is the URL to the Mappedin Web application. For example,https://demos-ssl.mappedin.com/web/v2/demos/mappedin-demo-mall.html#/
.
Optional Properties
The following properties are optional in the window.mappedin
configuration. They can be added to customize the Minimap experience.
lang
specifies the language of the text labels (if available).dataKey
specifies a custom property to lookup the location by. This may be any property of the MappedinLocation class. Some common properties to use includename
andshortName
. See FAQ.zoom
specifies a custom map zoom level. The default zoom value is 2.0, where larger values zoom out further from the map.webAppVersion
specifies the version of Mappedin Web you are linking to. This can either bev1
orv2
. If not specified or invalid, this is determined based on the "Apollo Version" field in the Venue Settings in CMS.deepLink
specifies a custom deepLink for thefullMapUrl
. For example,/directions?to=
directs the user to the full map with directions to thelocationId
.
When the Minimap is clicked, it calls the window.miOpenFullMap()
function. To add a custom button or link elsewhere on the page, call this function.
Styling
The Minimap will take up the entire space of it's parent container. It is recommended to put the above snippets in a wrapping container, and style that container to control position and size of the Minimap instead of the Minimap element itself.
Frequently Asked Questions
How do I display location names on the map?
Contact Mappedin to enable FloatingLabels for the venue to display the location name label on the Minimap.
How can I use the location's name as the ID for Minimap?
To use the location's name rather than locationId
or externalId
, set the dataKey
in window.mappedin
configuration to specify name
.
<script type="text/javascript"> window.mappedin = { clientId: "<Mappedin Key>", clientSecret: "<Mappedin Secret>", venue: "<Unique Venue Identifier", locationId: "<locationId | externalId>", fullMapUrl: "<Map Page URL>" webAppVersion: "v2”, dataKey: "name" };</script>
How can the user get directions to or from a location when they click the Minimap?
By default, Minimap will send the user to the location profile. Customize the deep link by adding the deepLink
property to the window.mappedin
configuration.
<script type="text/javascript"> window.mappedin = { clientId: "<Mappedin Key>", clientSecret: "<Mappedin Secret>", venue: "<Unique Venue Identifier", locationId: "<locationId | externalId>", fullMapUrl: "<Map Page URL>" webAppVersion: "v2", deepLink: "/directions?to=" };</script>
Use /directions?to=
or /directions?from=
to direct the user to the directions page with the locationId
.