For convenience, we create return a JavaScript object containing those values as latitude and longitude. We set an interval timer for periodically obtaining the device location. Then, we create functions for getting device location using the HTML5 location API and updating the browser location variables. First we set up an initial latitude and longitude in the general vicinity of San Francisco. So now it’s time to use the HTML5 location API for updating our location in real time. We’ve got our DIV for the application, and the DIV to hold that map already set up from our previous tutorial. Now that we have all of the relevant configuration settings and we have our map markers, let’s get started with collecting and publishing location data for our web or mobile web map. If you haven’t already, you first need to take care of a couple of prerequisites we covered in Part One and Two, where we set up our JavaScript environment and got started with map markers.

The code for this example is available in CodePen here. We’ll use the HTML5 location API to collect the user’s location from their device, and stream and publish location changes (based on the device’s self-reported location) to the map using PubNub Real-time Messaging. In this tutorial, we’ll live-update our JavaScript map markers we built in Part Two with live geolocation capabilities. This is Part Three of our four-part series on building real-time maps with geolocation tracking for web and mobile web using the JavaScript Google Maps API and PubNub.

Gmap live