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".
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!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(); }); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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> |
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
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
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
Thank you! Excellent, working just fine!
I am glad that it worked for you. Please share this website with your friends. 🙂
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?
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.
please guide me.waiting for your positive response.
Check my response to previous question you asked. Hope it helps.
in connecting gps to nodemcu you connected rx to 13 & tx to 12 but in programming you assigned rx to 12 & tx to 13 …
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
Not getting any value from ThingSpeak, in variable x and y
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