Build

Real-time Google Maps Geolocation Tracking: JavaScript (1/4)

4 min read PubNub Staff on Jul 28, 2019
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

A Google Maps tracking tutorial on retrieving, publishing, and displaying live-updating geolocation data on a real-time map using JavaScript and Google Maps API.

🔔 Before we begin this tutorial, signup for a PubNub account to get your API keys. We’ve got a generous sandbox tier that’ll cost you nothing until it’s time to scale! 🔔

Geolocation and tracking functionality continues to make leaps and bounds. We’ve transcended beyond the static map to interactive and dynamic mapping technology. With that, we’ve seen the vital role that a geolocation api can play in every industry, from the on-demand economy to the Internet of Things.

  • Watch your Uber or Lyft move towards you
  • Observe and highlight high-risk areas to fight disease
  • Track a fleet of drones
  • Track animals in a protected national park

Real-time tracking casts quite a wide net, eh?

Google Maps Tracking Tutorial Overview

This is a 4-part tutorial on building real-time maps for web and mobile web using the Google Maps JavaScript API and PubNub. We’ll begin with basics to get your app set up, then add real-time geolocation functionality in Parts 2-4.

In the end, you’ll have a basic JavaScript location tracking app with map markers, device location-tracking, and flight paths, powered by the JavaScript Google Maps API and PubNub.

javascript_overview-min

Setup

Tutorial Assets

For this tutorial, we presume you are working with a recent evergreen browser on a desktop or mobile device.

 

PubNub Setup

To get started, you’ll first need your PubNub publish and subscribe keys. If you don’t have an account, you can sign up here, and your pub/sub keys are available in the Admin Dashboard. The keys look like UUIDs and start with “pub-c-” and “sub-c-” prefixes respectively.

Once you have your pub/sub keys, create a new PubNub application to represent your Android application (and any other systems that communicate using the same channels). The PubNub application will include publish and subscribe keys that applications can use for those specified features.

Google Maps API Setup

To integrate with Google Maps, you’ll need to create a Google Maps API key. We recommend doing that using the getting started guide here. This creates an unique API key that can be locked down to whatever web apps you like. Once you’ve started to create a bunch of projects, you can manage your credentials in the Google API console here.

PubNub Overview

In this HTML5 and JavaScript sample application, PubNub provides the real-time communication capability that lets our web application receive incoming events as the position of a remote object (latitude and longitude) changes.

The core PubNub functionality that we use is  Real-time Messaging. Our application uses a PubNub channel to send and receive position changed events. In this example, the same application both sends and receives the position events, so we say it is both the publisher and subscriber. In your application, the publisher (sender) system(s) may be different from the subscriber (receiving) system(s).

Google Maps Overview

We’ll use the JavaScript Google Maps API and the HTML5 Map Widget for this tutorial. The HTML5 map widget displays a map of the vicinity you configure. The map size, map center latitude and longitude, zoom level, map style and other options may be configured to your initial preferences and updated on the fly.

The Google Maps JavaScript API provides an initialization callback option that calls a function you specify when the map is loading. In addition, we’ll use features like Map Markers and Polylines which allow you to place friendly map markers and flight paths on the map at the location(s) you specify (Parts 2, 3 and 4). All the points are user-specified and may be updated in real time as updates arrive.

Code Walkthrough

To work with the code, you’ll want to fork it into your own project using CodePen, or download the HTML code into a file and run it using your favorite HTTP server. We enjoy editing code in the CodePen web IDE like this:

Google Maps Geolocation

Once you’re in the IDE, you’ll be able to perform the minor code changes to get the app running quickly.

Application Setup and Configuration

The web page structure should be familiar if you’ve worked with web applications in the past. We start with a plain HTML5 + JavaScript application that has a DIV tag for the map display. We include the PubNub library for real-time communications in the HEAD of the HTML page.

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>

You’ll also want to include the Google Maps API using a SCRIPT tag at the bottom of the HTML page. At the time of writing, the relevant version is 3.exp.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_MAPS_API_KEY&callback=initialize"></script>

Note that you’ll need to replace the placeholder maps API key in the SCRIPT SRC attribute accordingly above.

It’s worth mentioning that for HTML5 location to work, you’ll be relying on the user to explicitly allow location access to your app on their device. Handling graceful fallback for cases where location permission is denied is beyond the scope of this tutorial.

The PubNub settings are included within a simple JavaScript map. You can update them with your own values as follows:

var pubnub = new PubNub({
  publishKey:   'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});

Running the Code

You don’t need to do anything special to run the app in CodePen – it runs automatically from the online editor. Depending on where you are viewing the app (geolocation), and the capabilities of your connection (WiFi or LTE), you may see different locations reported (IP to geo versus GPS location). We’ve found that different devices, as well as different browsers, have their own location accuracy characteristics, some more accurate than others.

Next Steps

With that, we now have our app set up. In Part Two, we’ll implement live map markers, which identify where a device is located on a map.

More from PubNub

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff

Node.js WebSocket Programming Examples
BuildSep 21, 20226 min read

Node.js WebSocket Programming Examples

An overview and examples of basic socket and WebSocket programming with Node.js.

PubNub Staff

PubNub Staff