GPS tracking with Arduino and the Google maps API

The GPS System has to be one of the most brilliant things ever invented.
~30 sattelites in orbit that can tell you where you are anywhere on the globe, with precision down to about 2 meters. Of course you and your Arduino should get in on the action! We’ll also look into plotting our data in the Google maps API.

Circuit GPS

I won’t go into great detail about how the GPS System actually works here, but in short your device seeks to receive data from a minimum of 4 sattelites and based on their relative position, triangulate its own position.
Most of the GPS Modules out there will output standard NMEA strings; A format that can be a bit tricky to parse if your doing it by hand.
I’ve been using the TinyGPS++ library to parse the GPS NMEA strings to usefull output.
The module will start giving out data when it get a satellite lock (and by that i mean when it finds the minimum number of satellites required), but how long this takes varies a fair bit with the quality of the module.
The fact that these modules are actually receiving data from satelittes means that you’ll also have better luck locking on to them outside, although mine worked just fine both inside apartments an in a moving car.
The things your GPS can provide that might be of interest could be for example: Location (Your Lat / Long), Speed, Elevation, and the exact time.
For this build i based the code on a great tutorial from Sparkfun, you can check that out here:
https://learn.sparkfun.com/tutorials/gps-logger-shield-hookup-guide/example-sketch-sd-card-gps-logging

Parts:
GeekCreit VK2828U7G5LF GPS Module
WaveShare MicroSD Board
Arduino Nano
Batteries
MicroSD Card

A tiny “gotcha” i’d like to mention is that like most other devices that communicate with your Arduino through a software serial, you’ll need to cross RX and TX:
The devices RX need to be connected to the port you define as your TX and vica versa.

Circuit:

Circuit GPS
The circuit

I turned my Datalogger on and went for a drive;
The sketch logs data to the SDCard every 5 seconds as long as it has a signal lock, appending every reading as a new line in a CSV that is saved to the SDcard.

CSV with GPS Data
CSV with GPS data

We can visualize this data through the Google maps API using Poly lines, and plot our path using our logged GPS Data: You’ll need your own API key from google if you want to try this

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>GPS Tracker rides again</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapOptions = {
            zoom: 9,
            center: {lat: 59.9428853, lng: 9.7596691},
            mapTypeId: 'satellite'
            };

        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var Coordinates = [
            {lat: 59.907119, lng: 10.616540},
            {lat: 59.906688, lng: 10.614795},
            {lat: 59.906250, lng: 10.613013},
            {lat: 59.905811, lng: 10.611227},
            {lat: 59.905372, lng: 10.609445},
            {lat: 59.905036, lng: 10.607619},
            {lat: 59.904830, lng: 10.605690},
            {lat: 59.904644, lng: 10.603758},
            {lat: 59.904373, lng: 10.601884},
            {lat: 59.904026, lng: 10.600152},
            {lat: 59.903663, lng: 10.598505},
            {lat: 59.903305, lng: 10.596847},
            {lat: 59.902935, lng: 10.595170},
            {lat: 59.902545, lng: 10.593497},
            {lat: 59.902133, lng: 10.591789},
            {lat: 59.901737, lng: 10.590107},
            {lat: 59.901336, lng: 10.588444},
            {lat: 59.900882, lng: 10.586405},
            {lat: 59.900608, lng: 10.584630},
            {lat: 59.900398, lng: 10.582856},
            {lat: 59.900211, lng: 10.581173},
            {lat: 59.900012, lng: 10.579549},
            {lat: 59.899734, lng: 10.577942},
            {lat: 59.899353, lng: 10.576371},
            {lat: 59.898883, lng: 10.574804},
            {lat: 59.898464, lng: 10.573148},
            {lat: 59.898170, lng: 10.571420},
            {lat: 59.897949, lng: 10.569655},
            {lat: 59.897670, lng: 10.567923},
            {lat: 59.897304, lng: 10.566239},
            {lat: 59.896949, lng: 10.564560},
            {lat: 59.896633, lng: 10.562848},
            {lat: 59.896327, lng: 10.561136},
            {lat: 59.896015, lng: 10.559419},
            {lat: 59.895706, lng: 10.557694}
           //Shortened for code brevity
        ];
        var Path = new google.maps.Polyline({
          path: Coordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        Path.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&amp;callback=initMap">
    //Add your own google API Key above
    </script>
  </body>
</html>

This data can be embedded in a website, or just saved as a .HTML and you have an interactive map where you can retrace your steps.

GPS data plotted on map
Google maps plotted path from GPS data