In the first parts of this series we saw a basic, embedded map and then added information windows and labels. In this post we’re going to overlay data being recorded by a tracking device to show our progress in real-time.
This was made pretty easy thanks to Garmin’s MapShare service: our Iridium-connected inReach Explorer+ device publishes tracking information automagically to our MapShare page, which has a KML feed that can be embedded as an overlay on Google Maps. The additional code, below, is trivial. It’s possible to zoom into the location of the latest data on map load, but I’ve chosen to leave it as is: the information is there for people to zoom into, of they choose, but we’ve chosen the option to “preserve the viewport”, otherwise.
<html>
<head>
<style>
html,
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100%;
overflow:…