Index
Introduction
This project demonstrates how to interface the NEO-6M GPS module with ESP32 using the Arduino IDE. The ESP32 runs a built-in web server that displays real-time latitude, longitude, date, and time data from the GPS. The location is shown on an embedded Google Map, with a direct link to open in the Google Maps app for navigation.
Required Components
- ESP32 Dev Board
- NEO-6M GPS Module
- Wifi Network
Pinout
- VCC: Power Supply 3.3 – 6 V
- GND: Ground
- TX: Transmit data serially which gives information about location, time etc.
- RX: Receive Data serially. It is required when we want to configure GPS module.
Circuit Diagram
- GPS Module VCC → ESP32 3.3V, 5V
- GPS Module GND → ESP32 GND
- GPS Module RX → ESP32 GPIO 17
- GPS Module TX → ESP32 GPIO 16
Code / Programming
- Install Required Library (via Arduino Library Manager).
- Go to the “Libraries” tab on the left-hand side of the screen.
- Click on the “Library Manager” button (book icon) at the top of the Libraries tab.
- In the Library Manager window, type “TinyGPSPlus” in the search bar.
- Locate the “TinyGPSPlus” library click on the “Install” button next to it.
- Wait for the library to be installed, and you’re ready to use the TinyGPSPlus library in your projects.
/*
Filename: GPS-WEB-LOCATION.ino
Author: www.oceanlabz.in
Modification: 6/9/2025
*/
#include <WiFi.h>
#include <TinyGPS++.h>
#include <HardwareSerial.h>
#include <WebServer.h>
// ================== GPS SETUP ==================
TinyGPSPlus gps;
HardwareSerial gpsSerial(1); // UART1 for GPS
#define GPS_RX 16 // GPS TX → ESP32 RX
#define GPS_TX 17 // GPS RX → ESP32 TX
// ================== WIFI SETUP ==================
const char* sta_ssid = "Your SSID"; // Change this
const char* sta_password = "Your Password"; // Change this
// ================== WEB SERVER ==================
WebServer server(80);
// Variables to hold GPS data
String latitude = "--";
String longitude = "--";
String gpsDate = "--";
String gpsTime = "--";
// HTML Page with auto-refresh using AJAX
String htmlPage() {
String page = "<!DOCTYPE html><html><head><meta charset='UTF-8'>";
page += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
page += "<title>ESP32 GPS Tracker</title>";
page += "<style>body{font-family:Arial;text-align:center;padding:20px;} ";
page += "h1{color:#2E8B57;} table{margin:auto;border-collapse:collapse;} ";
page += "td,th{border:1px solid #333;padding:10px;} iframe{margin-top:20px;border-radius:10px;} ";
page += "a{display:block;margin-top:10px;font-size:18px;color:#0066cc;text-decoration:none;} ";
page += "a:hover{color:red;} </style></head><body>";
page += "<h1>📡 ESP32 GPS Tracker</h1>";
page += "<table id='gpsTable'>";
page += "<tr><th>Parameter</th><th>Value</th></tr>";
page += "<tr><td>Latitude</td><td id='lat'>--</td></tr>";
page += "<tr><td>Longitude</td><td id='lng'>--</td></tr>";
page += "<tr><td>Date</td><td id='date'>--</td></tr>";
page += "<tr><td>Time</td><td id='time'>--</td></tr>";
page += "</table>";
page += "<iframe id='map' width='100%' height='400' frameborder='0'></iframe>";
page += "<a id='mapLink' target='_blank'>📍 Open in Google Maps</a>";
// JavaScript for auto-refresh every 5 seconds
page += "<script>";
page += "function updateData(){";
page += "fetch('/gps').then(res=>res.json()).then(data=>{";
page += "document.getElementById('lat').innerText=data.lat;";
page += "document.getElementById('lng').innerText=data.lng;";
page += "document.getElementById('date').innerText=data.date;";
page += "document.getElementById('time').innerText=data.time;";
page += "if(data.lat!='--' && data.lng!='--'){";
page += "document.getElementById('map').src='https://maps.google.com/maps?q='+data.lat+','+data.lng+'&z=14&output=embed';";
page += "document.getElementById('mapLink').href='https://www.google.com/maps/search/?api=1&query='+data.lat+','+data.lng;";
page += "}";
page += "});}";
page += "setInterval(updateData,5000);"; // every 5 seconds
page += "updateData();"; // first call
page += "</script>";
page += "</body></html>";
return page;
}
// ================== SETUP ==================
void setup() {
Serial.begin(115200);
gpsSerial.begin(9600, SERIAL_8N1, GPS_RX, GPS_TX);
// WiFi Station Mode
WiFi.mode(WIFI_STA);
WiFi.begin(sta_ssid, sta_password);
Serial.println("Connecting to Home WiFi...");
if (WiFi.waitForConnectResult() == WL_CONNECTED) {
Serial.print("Connected to Home WiFi, IP: ");
Serial.println(WiFi.localIP());
} else {
Serial.println("Failed to connect to Home WiFi");
}
// Web server routes
server.on("/", []() {
server.send(200, "text/html", htmlPage());
});
// API endpoint for GPS JSON data
server.on("/gps", []() {
String json = "{";
json += "\"lat\":\"" + latitude + "\",";
json += "\"lng\":\"" + longitude + "\",";
json += "\"date\":\"" + gpsDate + "\",";
json += "\"time\":\"" + gpsTime + "\"";
json += "}";
server.send(200, "application/json", json);
});
server.begin();
Serial.println("Web Server started");
}
// ================== LOOP ==================
void loop() {
// Handle GPS data
while (gpsSerial.available() > 0) {
gps.encode(gpsSerial.read());
if (gps.location.isUpdated()) {
latitude = String(gps.location.lat(), 6);
longitude = String(gps.location.lng(), 6);
Serial.println("Lat: " + latitude + " | Lng: " + longitude);
}
if (gps.date.isUpdated()) {
gpsDate = String(gps.date.day()) + "/" +
String(gps.date.month()) + "/" +
String(gps.date.year());
}
if (gps.time.isUpdated()) {
gpsTime = String(gps.time.hour()) + ":" +
String(gps.time.minute()) + ":" +
String(gps.time.second());
}
}
// Handle web requests
server.handleClient();
}
Accessing the Web Server
After uploading the sketch, open the Serial Monitor at 115200 baud and press the RESET button on the ESP32. If everything is fine, it will display the dynamic IP address obtained from your router as well as the “Web Server started, IP….” message.
Next, launch a browser and navigate to the IP address displayed on the Serial Monitor. You’ll see a webpage with a live GPS dashboard showing latitude, longitude, date, time, and an embedded Google Map with your current location.
