The SPOT Live Map Widget is a JavaScript widget that can be embedded into the client's website. It retrieves the 50 most recent messages from the SPOT API via an AJAX call for a given public shared page feed id. These public share pages can be created in the main SPOT account administration site (http://login.findmespot.com). The glId parameter in the shared page URL is the feed id that needs to be passed to the widget.
Version 2.0 Updates
Updated Instructions: Google requires an API key for anyone that uses their maps. As a result, in order to use our map widget, you will need to get an API key from google Click here to get API key
Note: You may need to enable the Google Maps JavaScript API under APIs in the Google API Console.
- Uses Google Maps JavaScript Api Version 3
- Customizable width & height for easier integration into user's site
- Customizable track line colors
- Added legend indicating devices and tracks
- Ability to turn on/off waypoints for specific devices
- New icons for indicating start and end points of device messages
- Customizable google map styles
- Optional auto refresh mode
Note: Password protected feeds are not supported at this time.
Example:
http://share.findmespot.com/shared/faces/viewspots.jsp?glId=0Wl3diTJcqqvncI6NNsoqJV5ygrFtQfBB
The Feed Id in the above shared page URL is: 0Wl3diTJcqqvncI6NNsoqJV5ygrFtQfBB
The AJAX call to the SPOT API sends a JSON response back to the widget, which is then grouped by device ESN and displayed on the map.
The live map widget depends on three external libraries. These libraries include JQuery (v1.11.0+), Google Maps API v3 and Marker manager, which is a library created by Google to manage adding and removing of map markers.
The widget is available at http://d3ra5e5xmvzawh.cloudfront.net/live-widget/2.0/spot-main-min.js and has been minified to minimize the number of HTTP requests.
Note: Please replace <SHARE_PAGE_FEED_ID> including '<' and '>' with your share page feed ID in the below snippet.
<script>
$(function() {
$('#widget').spotLiveWidget({
feedId: '<SHARE_PAGE_FEED_ID>',
mapType: 'HYBRID'
});
});
</script>
<script>
$(function() {
$('#widget').spotLiveWidget({
feedId: '<SHARE_PAGE_FEED_ID>',
width: 400,
height: 400
});
});
</script>
<script>
$(function() {
$('#widget').spotLiveWidget({
feedId: '<SHARE_PAGE_FEED_ID>',
legendHeight: 70
});
});
</script>
<script>
$(function() {
$('#widget').spotLiveWidget({
feedId: '<SHARE_PAGE_FEED_ID>',
showLegend: false
});
});
</script>
Please note that the legendHeight is not used if this option is set to false.
<script>
$(function() {
$('#widget').spotLiveWidget({
feedId: '<SHARE_PAGE_FEED_ID>',
autoRefresh: 5
});
});
</script>
<script>
$(function() {
$('#widget').spotLiveWidget({
feedId: '<SHARE_PAGE_FEED_ID>',
polyline: {
strokeWeight: 3, // [int]
strokeColor: {
'0-1234567' : '#000' // [Device-ESN : Hex-Color code]
}
}
});
});
</script>