Pubnub - Javascript Realtime Maps Geolocation Tracking

Welcome to the Realtime Maps with Pubnub, Javascript Google Maps API tutorial.   In this tutorial, you will learn how to create a REALTIME tracking system that will allow other users to see your live, realtime location on the map.

We will first start with a tutorial on how to initialize Pubnub, which is a data stream network (i.e. Pubsub) and will receive data from our Javascript/Google Map. We will create a simple "Hello World" test in Pubnub.  Next, we will set up our Google Maps API key.  This will then be followed by the creation of a flight path simulator that will show a moving marker on our map.  Finally, we will setup our realtime geolocation tracking map. 

You DO NOT have to be an expert in Javascript, Pubnub, Pubsub, or Google Maps.  There is NO NEED to feel like you have to learn all of these programming languages in order to set up a realtime map.  Of course, if you have experience in these programming languages, you will be able to extend on this tutorial as far as you can imagine.

In this section, we will create a Pubnub account in order to publish and subscribe data (i.e. Pubsub).

We will run our first "Hello World" program in Pubnub in order to demonstate Pubsub (publish and subscribe) capability.

In this lecture, we will setup access to our pubnub publish and subscribe key (i.e. Pubsub).  In addition, we will get our google maps API key.

In this tutorial, we will use Codepen, a social development environment for front-end designers and developers, in order to generate the html code for our flight path map.

In this tutorial, we will be generating our first flight path map.

This is a deep dive into the code so that you can start to gain insight as to how Pubnub works with Javascript and Google Maps API.

We are going to set up our live location using codepen.

In this lecture, we will send data (Publish and Subscribe..or PUBSUB) from our Pubnub console to our map.  As a result, our location will change in realtime.

In this section, we will continue our development of live location tracking. In addition, I provided a link so that you can download the files to your desktop (localhost).  I also show you how to set localhost so that you can test your map without a website.  The "live location" zip file is available at the end of this section.

In this section, we will conclude our live location tracking demo.  We will test a "use case" as if we were a user looking at our point on the map.  The "live location" zip file is available at the end of this section.