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

Description

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.

Details

In this project, we are going to :

Upload GPS data from ESP12E NodeMCU on thingspeak
Show that data in google maps using HTML and Javascript.

This hackaday contains:

Step wise instructions of setting up GPS with ESP12E NodeMCU on breadboard
Step wise instructions of creating thingspeak channel and connecting ESP12E NodeMCU to the channel and uploading the GPS data.
Step wise instructions to get that data in a map using HTML and javascript and complete explanation of the same.
Arduino Source code of ESP12E NodeMCU
HTML and javascript source code for showing thingspeak data on the map.

Files

x2.jpg

Circuit Diagram and Schematic

JPEG Image - 29.77 kB - 10/18/2017 at 15:14

Preview

Components

1 × Neo 6M GPS Module Electronic Components / Misc. Electronic Components

1 × ESP12E NodeMCU 1.0

1 × mini breadboard

Project Logs

Collapse

Build Instructions

Collapse

1

STORY

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.
2

Breadboard Setup

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
3

Thingspeak Channel Creation

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.