Displaying Android Location on a Live-Updating Map (Google Maps)

We’ve updated this tutorial with our up-to-date Android SDK and Google Maps API. Check it out here.

We left off by building our realtime Android location data broadcaster that detects and streams location data. But where are we going to broadcast that to? What are we going to do with it? Let’s visualize those location changes on a live-updating map.

In this blog post, we’ll be using PubNub to create a simple, location sharing and viewing application for Android. In this case, we’ll be using the Google Maps API, however tomorrow we’ll publish this tutorial using the MapBox API. In addition to visualizing location changes, we’ll also draw a line of previous location.

We’ll cover two broad topics:

  • Use PubNub to listen to a channel in Android
  • Use Google Maps SDK to draw locations on a map in realtime

You’ll need the full source code for this tutorial, as well as our broadcaster and MapBox API tutorial, so click here to download the all the files.

Let’s get right into it!

Our App Concept

Our app will be receiving location data and plotting it on a map. To receive the data, we will subscribe to a PubNub channel.

You can picture a PubNub channel like a room. People can enter or leave the room by subscribing or unsubscribing to the channel. Whenever someone wants to talk in the room, he/she publishes a message which will be heard by anyone subscribed to the channel. A PubNub message can be a JSON object for example. People subscribed to a channel are also notified whenever someone enters or leaves the channel.

We’ll imagine you already have a friend publishing his location in real-time on the same PubNub channel as the one we are subscribed to. Fairly simple, right?

Getting Started

The first thing we will do is get our working environment set up. We will need a couple things:

  • The PubNub Libraries, to receive the location data
  • The Google Play Services Library, so that we can use Google Maps. We will also have to create an API key to use the map SDK.

Setting Up PubNub Libraries For Android

These steps are pretty simple. All you need to use PubNub is to add 2 libraries to your project. The first step is to clone the git Android SDK:

The second step is to add the libraries to your project. You will find them at (replace x y z with current version numbers):

  • {the cloned git directory called java}/android/Pubnub-Android-x.y.z.jar
  • {the cloned git directory called java}/java/libs/bcprov-jdk15on-x.yz.jaz

If you need a step by step explanation for eclipse, you can check out this link.

Setting Up Google Maps For Android

The process should not be too complicated. You’ll need to set up the Google Play Services Library. Once that is done, you will have to go on the Google API Console to get a Google Maps API Key. The entire process is nicely explained here.

console

Hey! That’s all we need! Fairly simple setup, isn’t it? We can start coding now!

Using PubNub To View Your Friend’s Current Location

We will make the bare bones of the application so that you simply have the essential elements to make your own amazing app. We won’t create a fancy user experience, we trust that you’ll create something beautiful.

Our app being stripped down to the essentials, we will only have a single activity. Most of our code will start from the onCreate method.

The User Interface

We simply stripped it down to the Google Map:

Displaying Android Location on a Live-Updating Map with Java and Google Maps API UI

Initialize PubNub

The first thing we need is to initialize a PubNub instance.

When you connect to PubNub, you need to use Publish and Subscribe keys. To get your unique pub/sub keys, you’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Dashboard. Our free Sandbox tier should give you all the bandwidth you need to build and test your messaging app with the web messaging API.

All we need to do is to subscribe to the proper channel where your friend is broadcasting his current location. Notice how we are passing it the “subscribeCallback” variable? We will need to implement those. They are the methods which will be called when the connection to the channel succeeds or fails, if someone enters or leaves the channel, and most importantly for us a method which will notify us whenever someone has published a message to the channel.

We will only focus on the callback being fired when a message is sent. You can check out the other ones here.

Great! We are receiving the message that are being send to our channel! The next step now is to edit our Google Map view in order to view the location.

Using The Android Google Maps SDK

At this point, we already have the Map on screen and are getting notified whenever we receive a new location point. In this chapter we will tackle using the Google Maps API to interact with the Map View, and how to update it according to the locations we receive.

Interacting With The Google Map Instance

To interact with the map and retrieve the Google Map instance, we need to modify our “onCreate” method:

We extract the map object from the xml layout as a mapFragment instance. From it, we retrieve the Google Map with the “getMapAsync” method. We pass our activity as the context. This implies that we must override a callback inside our class. The callback will be called when the map is ready. On this step we added 2 lines to our onCreate method, sent our class as implementing the “OnMapReadyCallback”, now we have actually implement it:

We will explain what the “initializeMap” method is for soon.

Updating The Map View

At this point all we have left to do is update the map every time we receive a new location. We want: * To place a marker where ever our friend’s current location is, * Draw a line between the previous locations where our friend was in order to trace his commute, * Center the map view on our friend’s current location.

To do so, we will need to start by initializing the line’s characteristics in the “initializeMap” method:

We’re all set and initialized our variables. We need to update the map following the 3 steps mentioned above every time we receive a new location. This means that we will need to modify our PubNub callback:

A lot of things have changed here. First of all, we need to extract the data from our message. We cast it as a JSON Object and get the latitude and longitude using their keys. This allows us to update our current position variable. Once this is done, we need to call 3 methods which follow the 3 steps: updating the marker position and the drawn line and centering the map on the current location.

However, these 3 methods interact with the user interface. As a result, we can only apply these modifications by running these tasks on the UI thread. For this reason, we must use a Runnable object and call our methods from it. This is just due to Android’s architecture.

Now that we have this out of the way, all we have left to do is implement these methods.

To update the polyline, we simply add a new point to our “PolylineOptions” instance, remove any previous polyline or marker from the map, and finally add the polyline on the map again. Unfortunately simply adding a point to the PolylineOptions instance will not update the Polyline dynamically, we are forced to remove the previous one and add the new one again.

The updatePolyline method already cleared the previous marker from the map, as a result all we need to do is add a new marker to the map.

And all we have left to do is animate the map view to move to the new location by passing the method a latitude/longitude instance and a value for the zoom.

Hey! That’s it we are done! Fairly simple right? We created a PubNub instance, subscribed to a channel and as soon as we receive a message we update the map following those 3 steps. Pretty straightforward, but it’s a great start to build awesome apps!

If you are looking for more, we also made the same app using MapBox instead of Google Maps.

Hope you enjoyed this!

Try PubNub Today

Connect up to 100 devices for Free