Show GPS data on Google map from ESP12E and NEO 6M GPS

Read GPS data from thingspeak and show it in the Google map using ESP12e Nodemcu and GPS Neo 6M Module. We will upload the data on thingspeak server using ESP12e Nodemcu module. The data is being continuously taken from GPS Neo 6m Module which is connected to our ESP12e Nodemcu module. In this tutorial we are going to see step by step process to connect GPS Neo 6M Module with ESP12e Nodemcu, creating thingspeak channel where latitude and longitude will be updated and finally creating a web page where this data will be parsed in Google map using the google map api key.

Bread board setup to Read GPS data from thingspeak and show it in the Google map using ESP12e Nodemcu and GPS Neo 6M Module will require you to setup and connect ESP12e nodemcu module with Neo 6m GPS module. Follow the below step by step instruction to setup the circuit on breadboard. I hope you already have gathered all the components necessary for this tutorial. Also please use the below circuit diagram for reference while making the circuit. Make sure that you are tallying each and every circuit connection from the given circuit diagram.

Connect your Neo 6M GPS module with ESP12E NodeMCU in the below pin layout:

Neo 6M GPS ESP12E NodeMCU

VCC +3.3V

GND GND

RX D7

TX D6

I am assuming that you already have a thingspeak account. If not then visit https://thingspeak.com/ and create your account. And follow the below process:

1. Create a new channel on thingspeak and create two fields.

2. Click save channel in the below of the page and copy the below credentials in a text file. We will use it further for our program.

Install this library. It is a very good library for GPS. We are going to use the same library.

https://github.com/mikalhart/TinyGPSPlus

Copy the Arduino code attached with this instructions. Make sure to replace your credentials with the default credentials in the C code.

1. Your wifi username and password 2. Your "Thingspeak Write API Key"

Flash the program to your ESP12E NodeMCU module.

If everything is right then you can see the updated data on your thingspeak charts.

Now its time to parse the thingspeak json data and show it in a map with marker using HTML and javascript.

First get your Google Maps API Key from here :

https://developers.google.com/maps/documentation/javascript/get-api-key

If you are confused about the procedure, then you can visit this tutorial for the instructions. I am just leaving it here since its very easy.

Copy the code attached with this tutorial and replace your 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

Now just double click on the html file and it might show something like this:

(I have blurred my location because I don't want any stalker :) )

And done. Here is the small video in which I have consolidated everything with the output. Hope you like my tutorial.