Showing Thingspeak GPS data in Google Maps using Javascript and HTML

20 mins

Read GPS data from thingspeak and show it in the Google map using ESP12e Nodemcu and GPS Neo 6M Module

Introduction

In previous tutorial, we succesfully uploaded the data from Neo 6M GPS Module using ESP12E Node MCU module on the thingspeak server. In this tutorial, we are going to get the json data from the thingspeak server and parse it using HMTL and javascript to show it in Google Maps along with a marker. I hope that you already have a google or gmail account. Follow the below steps to get the Google Maps API key which will be used in our code to get the json data and show it in the marker on Google Maps.

Goto https://developers.google.com/maps/documentation/javascript/get-api-key and click on "Get A Key" on the top right corner as shown in the below image.

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (1)

2. Now Click on "Select or Create Project" in the dialog box which appears after clicking on "Get A Key" as shown below.

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (2)

3. Select the "Create a new project" from the list as shown below.

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (3)

4. Give a name to your project and click on "Enable API"

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (4)

5. Now you will get an API Key in a text box. Click on "copy clipboard" icon (the file on file icon) and hit "Finish". You now have Google Maps API key which you can use in your HTML code to show map.

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (5)

6. Now copy and paste the following file in notepad++ and save it as "index.html".

<!DOCTYPE html>
<html>
  <head>
    <title>ESP12E, Thingspeak, GPS and Google Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=Your_Google_Map_API_key"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>

      var map;
        var x;
        function loadmaps(){
            $.getJSON("https://api.thingspeak.com/channels/Thingspeak_channel_id/fields/1/last.json?api_key=Your_thingspeak_read_api_key", function(result){
        	
            var m = result;
            x=Number(m.field1);
                           //alert(x);

        });
            $.getJSON("https://api.thingspeak.com/channels/Thingspeak_channel_id/fields/2/last.json?api_key=Your_thingspeak_read_api_key", function(result){
        	
            var m = result;
            y=Number(m.field2);
                
                
        }).done(function() {
            
                initialize();
    });
            
        }

<!DOCTYPE html>

<html>

<head>

<title>ESP12E, Thingspeak, GPS and Google Map</title>

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 100%;

}

/* Optional: Makes the sample page fill the window. */

html, body {

height: 100%;

margin: 0;

padding: 0;

}

</style>

var map;

var x;

function loadmaps(){

$.getJSON("https://api.thingspeak.com/channels/Thingspeak_channel_id/fields/1/last.json?api_key=Your_thingspeak_read_api_key", function(result){

var m = result;

x=Number(m.field1);

//alert(x);

});

$.getJSON("https://api.thingspeak.com/channels/Thingspeak_channel_id/fields/2/last.json?api_key=Your_thingspeak_read_api_key", function(result){

var m = result;

y=Number(m.field2);

}).done(function() {

initialize();

});

}

        window.setInterval(function(){
        loadmaps();
            }, 9000);
      function initialize() {
          //alert(y);
        var mapOptions = {
          zoom: 18,
          center: {lat: x, lng: y}
        };
        map = new google.maps.Map(document.getElementById('map'),
            mapOptions);

        var marker = new google.maps.Marker({
          position: {lat: x, lng: y},
          map: map
        });

        var infowindow = new google.maps.InfoWindow({
          content: '<p>Marker Location:' + marker.getPosition() + '</p>'
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, marker);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

window.setInterval(function(){

loadmaps();

}, 9000);

function initialize() {

//alert(y);

var mapOptions = {

zoom: 18,

center: {lat: x, lng: y}

};

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

mapOptions);

var marker = new google.maps.Marker({

position: {lat: x, lng: y},

map: map

});

var infowindow = new google.maps.InfoWindow({

content: '<p>Marker Location:' + marker.getPosition() + '</p>'

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map, marker);

});

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

</body>

</html>

7. Now replace the following credentials:
1. Your copied, google api key
2. Your Thingspeak Read API key
3. Your Thingspeak Read API Key
4. Your Thingspeak Channel ID
5. Your Thingspeak Channel ID

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (6)

8. Now double click on your webpage "index.html" and wait for some time. It will take some time to load the map and marker. If you have done everything right, then you will get the following output.(blurred my location because I don't want any stalker 😀 )

Showing-Thingspeak-GPS-data-in-Google-Maps-using-Javascript-and-HTML (7)

And here is the final output video:

Hope you like my tutorials. Please subscribe to my youtube channel for more cool tutorials.

https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ

Please login to get access to the quiz

Back to Read GPS data from thingspeak and show it in the Google map using ESP12e Nodemcu and GPS Neo 6M Module

Comments ( 34 )

Sha

17 Nov 2017

How do i show alarm event . I want the marker to indicate alarm occurred on the map. Eg. flood at X location which sensor gave 1 as alarm value and 0 for no alarm

Reply
- vivek
  
  22 Nov 2017
  
  On thingspeak, you can define ‘react’. Where if the channel meets certain condition, then it will send an sms, call or tweet. Check out ‘React’ on thingspeak
  
  Reply
Freddie Snijman

17 Jan 2018

Thank you! Excellent, working just fine!

Reply
- vivek
  
  27 Jan 2018
  
  I am glad that it worked for you. Please share this website with your friends. 🙂
  
  Reply
Ayesha Hanif

03 Mar 2018

Hell sir,hru
sir how can we get gps data from things peaks and show it on our webpage as well as how can we store it in our web database?

Reply
- vivek
  
  12 Mar 2018
  
  Ayesha, you can use firebase to do that. You can use firebase to save the web database. Or you can use Mongodb along with nodejs to store the the data locally on your computer first and then update it in thingspeak.
  
  Reply
Ayesha Hanif

03 Mar 2018

please guide me.waiting for your positive response.

Reply
- vivek
  
  12 Mar 2018
  
  Check my response to previous question you asked. Hope it helps.
  
  Reply
PRANEET KUMAR

08 Mar 2018

in connecting gps to nodemcu you connected rx to 13 & tx to 12 but in programming you assigned rx to 12 & tx to 13 …

Reply
- vivek
  
  12 Mar 2018
  
  Praneet, for communication you need to connect RX to TX and Tx to RX. If you receive , the other end should be connected to transmit. 🙂 Don’t forget to subscribe to my youtube channel https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ
  
  Reply
Sarang

09 Mar 2018

Not getting any value from ThingSpeak, in variable x and y

Reply
- vivek
  
  12 Mar 2018
  
  Most of the time , it is minor bug. You have to cross check the code and values again. Also double cross check your gps connection . Don’t forget to subscribe to my youtube channel https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ
  
  Reply
Vasan

20 Apr 2018

Thank you Vivek. This is awesome.

Reply
- vivek
  
  03 May 2018
  
  I am glad that you found it useful. Please Support me by subscribing to my youtube channel https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ?view_as=subscriber
  
  Reply
Vinod Kolte

30 Apr 2018

Sir,
html page is not opening,
data is generating on thingspeak channel but html page not loading map\
so what should i do??

Reply
- vivek
  
  03 May 2018
  
  Vinod please check again. It is working. Also subscribe to my youtube channel 🙂 https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ?view_as=subscriber
  
  Reply
Chetan

17 May 2018

Is there any way through which we can group lat ,long values and plot it against another parameter?

Reply
- vivek
  
  23 May 2018
  
  Yes, simply change the field using which you want to plot it against.
  
  Reply
Muhammad Ega

26 May 2018

Hello vivek, I have a problem on my GPS, what is happening and what is the solution if my serial monitor showing invalid time? thanks in advance

Reply
- vivek
  
  27 May 2018
  
  Can you post what it is printing in serial monitor?
  
  Reply
Wan

27 May 2018

this used to work but it doesnt work anymore. I am so frustated because I dont know how to fix it

Reply
- vivek
  
  28 May 2018
  
  Check if you google api key is still valid or not.
  
  Reply
Diab

27 May 2018

Hi Vivek.
Congratulations for this great job..
I followed your instructions, the part related to Thinspeak is working fine but the html page is shown as a text in my web browser and not as a web page.
Is there a way to change this in the code itself which copied from your site?
Thanks.

Reply
- vivek
  
  28 May 2018
  
  Sure, here is the github link : https://github.com/vikkey321/Display-Thingspeak-GPS-data-on-Google-Map-from-ESP12E-and-Neo-6M-GPS
  
  Also try running it in google chrome
  
  Subscribe : https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ?view_as=subscriber
  Follow me : https://www.facebook.com/vikkey321/
  
  Reply
Teddy

25 Jun 2018

help me, i got this on serial monitor
INVALID Date/Time: 0/0/2000 00:00:00.00

Reply
- vivek
  
  25 Jul 2018
  
  Hi Teddy,
  Its problem with your GPS not programming. Sometimes GPS don’t work indoors or even outdoors at other locations. What I would recommend you is try to switch place probably at your friends place and see again the output.
  
  Reply
Teddy

25 Jun 2018

Update: Now I got this on serial monitor
INVALID Date/Time: 6/25/2018 02:39:45.00

Reply
- vivek
  
  25 Jul 2018
  
  Hi Teddy,
  Its problem with your GPS not programming. Sometimes GPS don’t work indoors or even outdoors at other locations. What I would recommend you is try to switch place probably at your friends place and see again the output.
  
  Reply
Noveill

11 Jul 2018

Hello Sir, I am having a problem with the website that you show in the first image. After I click into this link , https://developers.google.com/maps/documentation/javascript/get-api-key, it did not show “GET A KEY” on the screen. Please teach me how to do, thank you very much.

Reply
- vivek
  
  25 Jul 2018
  
  You need to sign in into developer account to get logged in. Also hit on get started and follow the screens.
  
  Reply
N25

30 Aug 2018

how i can change the marker on the map ? and put the car marker like google map??

Reply
- vivek
  
  23 Sep 2018
  
  https://developers.google.com/maps/documentation/javascript/custom-markers
  
  Reply
We Ly

30 Aug 2018

how i can change the marker on the map ? and put the car marker like google map??

Reply
- vivek
  
  23 Sep 2018
  
  Refer this link : https://developers.google.com/maps/documentation/javascript/custom-markers
  
  Reply