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
sir , maps is not free?
It was earlier. They need you to register first to use it. It is not chargeable. They are just ensuring that it is not a spam.
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
Thank you Vivek. This is awesome.
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
Sir,
html page is not opening,
data is generating on thingspeak channel but html page not loading map\
so what should i do??
Vinod please check again. It is working. Also subscribe to my youtube channel 🙂 https://www.youtube.com/channel/UCduc9YE9oZlw36YmTQ6rDEQ?view_as=subscriber
Is there any way through which we can group lat ,long values and plot it against another parameter?
Yes, simply change the field using which you want to plot it against.
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
Can you post what it is printing in serial monitor?
this used to work but it doesnt work anymore. I am so frustated because I dont know how to fix it
Check if you google api key is still valid or not.
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.
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/
help me, i got this on serial monitor
INVALID Date/Time: 0/0/2000 00:00:00.00
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.
Update: Now I got this on serial monitor
INVALID Date/Time: 6/25/2018 02:39:45.00
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.
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.
You need to sign in into developer account to get logged in. Also hit on get started and follow the screens.
how i can change the marker on the map ? and put the car marker like google map??
https://developers.google.com/maps/documentation/javascript/custom-markers
how i can change the marker on the map ? and put the car marker like google map??
Refer this link : https://developers.google.com/maps/documentation/javascript/custom-markers
please help me how to check the location on googlemaps
What exactly do you want to do?
Thanks for sharing this. Is it possible to show a value besides the marker? I would like to use this to display Air Quality Data so, besides Lat-Alt I need to show an additional value which will be read from a variable in Thingspeak. Thanks!
Yes, please check the google maps api for that.
API key from map asking for billing account?? Can I get for free??
Yes, you can get it for free.
hello sir i have the same problem here, plus i don’t have a credit card .is there any other way to do it?
They might have changed the policies. I am not sure of the work around.
SIr will I be able to see the google maps output from my android phone also??
Yes, you just have to put that webpage in webview in your phone.
Hey. Can you please guide me how to show data from thingspeak of any sensor other than GPS on given latitude, longitude?
Well you can use nodemcu ip address to get the latitude and longitude.
my nodemcu 1.0 stops sending data to thingspeak after 15 minute why??
It might be hanging in between. Clear the variables after 5 minutes of counter.
nodemcu 1.0 stops sending data to thingspeak after 15 minutes but I can see the latitude and longitude values in the serial moniter but not in thingspeak?why?
any help please
It might be hanging in between. Clear the variables after 5 minutes of counter.
Hi,
great tutorial, thank you!
Is it possible to add also, temperature etc. from thingspeak?
Yes, just create a field named temperature in thingspeak. And pass on the field numbers in the arduino code.
Sir, I’ve send latitude and longitude data to thingspeak but the webpage is not showing the map….
Can you please let me know whether this process is still working or is there any issue due to Google’s new policies
If the api are working, that shouldn’t be a problem. Try creating a new api in google cloud.
This tutorial was really good. I am up and running well. I have been able to modify your code to suit me. Please can you tell me how I can plot not just the last point (which works great) but say the last 120 points to show a track on the Map. That must be possible too. Paul.
Yes, it is definitely possible. To plot those points, you have to check the google maps api. You only have to write javascript block to plot those api.
Great work! You are kind. Can you show how to plot a series of points, say the last 120 from the ThingSpeak Channel please. That way it woukd show a track.
Also, may I suggest you remove the blurring from the final map result (as it detracts a lot from your achievement) and instead just use the coordinates of a publicly known place of your choosing. Paul
The map is quite slow to load. Is there a reason for that e.g. the refresh interval?
Can you stop the refresh from switching back to map mode from satellite mode? and resetting any zoom that has been applied. Yours was a great project!
Hi Paul, all the above said requirements can be done. Map is slow because we are using thingspeak. Thingspeak is free cloud. And it by default adds a delay of 5 seconds to avoid traffic. Which unfortunately you cannot change. You have to use GCP or amazon webservices and also build your own database stack with a middleware which will completely replace thingspeak. For the maps refresshing and zooming automatically, that is a part of javascript which you can code. Please understand that I do this in my free time and my blogs are completely free. If you have any custom requirements, mail me at admin@iotmonk.com. We can take this discussion further.
Check in the thingpseak api. There is an api which will show json of last data stream. You can get those and point it using javascript.