├── README.md
├── esp32-gmaps-external
    ├── esp32-gmaps-external.ino
    └── server files
    │   ├── gps.php
    │   ├── gps_data.txt
    │   ├── index.html
    │   ├── jscript.js
    │   └── style.css
└── esp32-gmaps-local
    ├── README.md
    ├── esp32-gmaps-local.ino
    ├── jscript.h
    ├── mainpage.h
    └── style.h


/README.md:
--------------------------------------------------------------------------------
1 | # Using ESP32 with GPS and Google Maps
2 | 
3 | ## Full tutorial: https://www.teachmemicro.com/esp32-gps-google-maps/
4 | 
5 | 1. Requires Google Maps API Key
6 | 2. esp32-gmaps-local > view GPS plot on local webserver hosted by ESP32
7 | 3. esp32-gmaps-external > view GPS plot on external webserver
8 | 


--------------------------------------------------------------------------------
/esp32-gmaps-external/esp32-gmaps-external.ino:
--------------------------------------------------------------------------------
  1 | /*
  2 | ESP32 GPS External Plotter on Google Maps
  3 | by Roland Pelayo
  4 | for TeachMeMicro
  5 | 
  6 | Rev 1.0 - November 1, 2021
  7 | 
  8 | Full tutorial on https://www.teachmemicro.com/esp32-gps-google-maps
  9 | */
 10 | 
 11 | #include <SoftwareSerial.h>
 12 | #include <TinyGPS.h>
 13 | #include <WiFi.h>
 14 | #include <WiFiClient.h>
 15 | //#include <WebServer.h>
 16 | //#include "mainpage.h"
 17 | //#include "jscript.h"
 18 | //#include "style.h"
 19 | #include <HTTPClient.h>
 20 | 
 21 | //provide your own WiFi SSID and password
 22 | const char* ssid = "<Your WiFi SSID>";
 23 | const char* password = "<Your WiFi Password>";
 24 | 
 25 | //external web server address
 26 | const char* server = "http://<your-server-domain>/gps.php";
 27 | 
 28 | //WebServer server(80);
 29 | 
 30 | TinyGPS gps;
 31 | SoftwareSerial ss;
 32 | 
 33 | //For storing data as string
 34 | String gpsData = "";
 35 | char buff[10];
 36 | //GPS data
 37 | float flat, flon;
 38 | unsigned long age;
 39 | 
 40 | void setup(void) {
 41 |   // For debugging
 42 |   Serial.begin(115200);
 43 |   // Initialize gps
 44 |   ss.begin(9600, SWSERIAL_8N1, 13, 12, false);
 45 |   if(!ss){
 46 |     Serial.println("Invalid SoftwareSerial pin configuration, check config"); 
 47 |     while (1) { // Don't continue with invalid configuration
 48 |       delay (1000);
 49 |     }
 50 |   }
 51 |  
 52 |   //Use ESP32 as WiFi Station
 53 |   WiFi.mode(WIFI_STA);
 54 |   //Initiate WiFi Connection
 55 |   WiFi.begin(ssid, password);
 56 |   Serial.println("");
 57 |   // Wait for connection
 58 |   while (WiFi.status() != WL_CONNECTED) {
 59 |     delay(500);
 60 |     Serial.print(".");
 61 |   }
 62 |   Serial.println("");
 63 |   Serial.print("Connected to ");
 64 |   //Print your WiFi's SSID (might be insecure)
 65 |   Serial.println(ssid);
 66 |   Serial.print("IP address: ");
 67 |   //Print your local IP address (needed for browsing the app)
 68 |   Serial.println(WiFi.localIP());
 69 | }
 70 | 
 71 | void loop(void) {
 72 |   // Send GPS data every second
 73 |   gps.f_get_position(&flat, &flon, &age);
 74 |   gpsData = "lat="+floatToString(flat,TinyGPS::GPS_INVALID_F_ANGLE, 10, 6) + "&lng=";
 75 |   gpsData += floatToString(flon,TinyGPS::GPS_INVALID_F_ANGLE, 11, 6);
 76 |   if(gpsData.indexOf("v") > 0){
 77 |       gpsData = "lat=7.207573&lng=125.395874";
 78 |   }
 79 |   Serial.println(gpsData);
 80 |   smartdelay(1000);
 81 |   
 82 |   HTTPClient client;
 83 |   
 84 |   client.begin(server);
 85 |   client.addHeader("Connection","keep-alive");
 86 |   client.addHeader("Content-Length",String(gpsData.length()));
 87 |   client.addHeader("Content-Type", "text/plain");
 88 |   int httpResponseCode = client.POST(gpsData);
 89 | 
 90 |   Serial.println(client.getString());
 91 |   if(httpResponseCode > 0){
 92 |     Serial.println("Data successfully sent to server!");      
 93 |   }else{
 94 |     Serial.print("Server upload failed. ");
 95 |     Serial.println(client.errorToString(httpResponseCode).c_str());
 96 |   }
 97 |   // Free resources
 98 |   client.end();
 99 | }
100 | 
101 | // Function for converting gps float values to string
102 | String floatToString(float val, float invalid, int len, int prec) {
103 |   String out = "";
104 |   if (val == invalid) {
105 |     while (len-- > 1){
106 |       return "inv" ;
107 |     }
108 |   }
109 |   else{
110 |     for (int i = 0; i < 10; i++) {
111 |        dtostrf(val, len, prec, buff);  
112 |        out += buff;
113 |        return out;
114 |     }
115 |   }
116 | }
117 | 
118 | static void smartdelay(unsigned long ms)
119 | {
120 |   unsigned long start = millis();
121 |   do 
122 |   {
123 |     while (ss.available())
124 |       gps.encode(ss.read());
125 |   } while (millis() - start < ms);
126 | }
127 | 


--------------------------------------------------------------------------------
/esp32-gmaps-external/server files/gps.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     $inp = file_get_contents("php://input");
 3 |     if(!empty($inp)){
 4 |         $s = explode("&",$inp);
 5 |         $a = explode("=",$s[0]);
 6 |         $b = explode("=",$s[1]);
 7 |         // Replace this with another method that saves to DB
 8 |         $file = fopen("gps_data.txt", "w") or die("Unable to open file!");
 9 |         $txt = $a[1] . "," . $b[1];
10 |         fwrite($file, $txt);
11 |         fclose($file);
12 |     }else{
13 |         // Replace this with another method to reads from DB
14 |         $file = fopen("gps_data.txt", "r") or die("Unable to open file!");
15 |         echo fread($file,filesize("gps_data.txt"));
16 |         fclose($file); 
17 |     }
18 | ?>
19 | 


--------------------------------------------------------------------------------
/esp32-gmaps-external/server files/gps_data.txt:
--------------------------------------------------------------------------------
1 | 7.055201,125.552010


--------------------------------------------------------------------------------
/esp32-gmaps-external/server files/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ESP32 Map</title>
 5 |     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
 6 |     <script
 7 |       src="https://code.jquery.com/jquery-3.6.0.min.js"
 8 |       integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
 9 |       crossorigin="anonymous"></script>
10 |     <link rel="stylesheet" type="text/css" href="style.css" />
11 |     <script src="jscript.js"></script>
12 |   </head>
13 |   <body>
14 |     <div id="map"></div>
15 | 
16 |     <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
17 |     <script
18 |        src="https://maps.googleapis.com/maps/api/js?key=<Google Maps API Key>&callback=initMap&v=weekly"
19 |        async
20 |     ></script>
21 |   </body>
22 | </html>


--------------------------------------------------------------------------------
/esp32-gmaps-external/server files/jscript.js:
--------------------------------------------------------------------------------
 1 | let map;
 2 | var mrkr = null;
 3 | // temporary latitude and longitudes
 4 | var lat = null;
 5 | var lng =  null;
 6 | var myLocation = null; 
 7 | 
 8 | function getPosition(){
 9 |     var gpsData = null;
10 |     $.get("gps_data.txt", function(data){
11 |       gpsData = data;
12 |       console.log(gpsData);
13 |       vals = gpsData.split(",");
14 |       lat = parseFloat(vals[0]);
15 |       lng = parseFloat(vals[1]);
16 | 
17 |       if(!isNaN(lat) || !isNaN(lng)){
18 |           changeMarkerPosition();
19 |       }else{ return; }
20 |     },"text");
21 |      
22 |     
23 | }
24 | 
25 | function changeMarkerPosition() {
26 |  
27 |     myLocation = new google.maps.LatLng(lat, lng);
28 |     console.log(myLocation);
29 |     mrkr.setPosition(myLocation);
30 |     map.setCenter(myLocation);
31 | }
32 | 
33 | function initMap() {
34 |   myLocation = new google.maps.LatLng(lat, lng);
35 |   map = new google.maps.Map(document.getElementById("map"), {
36 |     center: myLocation,
37 |     zoom: 19,
38 |   });
39 | 
40 |   mrkr = new google.maps.Marker({
41 |     position: myLocation,
42 |     map,
43 |     title: "My Location",
44 |   });
45 | 
46 |   setInterval(getPosition,1000);
47 | }
48 | 


--------------------------------------------------------------------------------
/esp32-gmaps-external/server files/style.css:
--------------------------------------------------------------------------------
 1 | #map {
 2 |     height: 100%;
 3 |   }
 4 |   
 5 |   html,
 6 |   body {
 7 |     height: 100%;
 8 |     margin: 0;
 9 |     padding: 0;
10 |   }


--------------------------------------------------------------------------------
/esp32-gmaps-local/README.md:
--------------------------------------------------------------------------------
1 | # ESP32 GPS Plotter with Google Maps
2 | ## Full tutorial: https://www.teachmemicro.com/esp32-gps-google-maps/
3 | 
4 | Plot ESP32 + GPS device location in Google Maps. 
5 | * Requires [Google Maps API key](https://developers.google.com/maps/documentation/javascript/overview)
6 | * ESP32 must be online (use WiFi)
7 | 
8 | 


--------------------------------------------------------------------------------
/esp32-gmaps-local/esp32-gmaps-local.ino:
--------------------------------------------------------------------------------
  1 | /*
  2 | ESP32 GPS Local Plotter on Google Maps
  3 | by Roland Pelayo
  4 | for TeachMeMicro
  5 | 
  6 | Rev 1.0 - November 1, 2021
  7 | 
  8 | Full tutorial on https://www.teachmemicro.com/esp32-gps-google-maps
  9 | */
 10 | 
 11 | #include <SoftwareSerial.h>
 12 | #include <TinyGPS.h>
 13 | #include <WiFi.h>
 14 | #include <WiFiClient.h>
 15 | #include <WebServer.h>
 16 | #include "mainpage.h"
 17 | #include "jscript.h"
 18 | #include "style.h"
 19 | 
 20 | //provide your own WiFi SSID and password
 21 | const char* ssid = "<Your WiFi SSID>";
 22 | const char* password = "<Your WiFi Password>";
 23 | 
 24 | WebServer server(80);
 25 | 
 26 | TinyGPS gps;
 27 | SoftwareSerial ss;
 28 | 
 29 | //For storing data as string
 30 | String text= "";
 31 | char buff[10];
 32 | //GPS data
 33 | float flat, flon;
 34 | unsigned long age;
 35 | 
 36 | void setup(void) {
 37 |   // For debugging
 38 |   Serial.begin(115200);
 39 |   // Initialize gps
 40 |   ss.begin(9600, SWSERIAL_8N1, 13, 12, false);
 41 |   if(!ss){
 42 |     Serial.println("Invalid SoftwareSerial pin configuration, check config"); 
 43 |     while (1) { // Don't continue with invalid configuration
 44 |       delay (1000);
 45 |     }
 46 |   }
 47 |  
 48 |   //Use ESP32 as WiFi Station
 49 |   WiFi.mode(WIFI_STA);
 50 |   //Initiate WiFi Connection
 51 |   WiFi.begin(ssid, password);
 52 |   Serial.println("");
 53 |   // Wait for connection
 54 |   while (WiFi.status() != WL_CONNECTED) {
 55 |     delay(500);
 56 |     Serial.print(".");
 57 |   }
 58 |   Serial.println("");
 59 |   Serial.print("Connected to ");
 60 |   //Print your WiFi's SSID (might be insecure)
 61 |   Serial.println(ssid);
 62 |   Serial.print("IP address: ");
 63 |   //Print your local IP address (needed for browsing the app)
 64 |   Serial.println(WiFi.localIP());
 65 |   //Page for reading data. Sensor is read in this part
 66 |   server.on("/loc", [](){
 67 |     gps.f_get_position(&flat, &flon, &age);
 68 |     text = floatToString(flat,TinyGPS::GPS_INVALID_F_ANGLE, 10, 6) + ',';
 69 |     text += floatToString(flon,TinyGPS::GPS_INVALID_F_ANGLE, 11, 6);
 70 |     if(text.indexOf("v") > 0){
 71 |       text = "7.207573, 125.395874";
 72 |     }
 73 |     Serial.println(text);
 74 |     server.send(200, "text/plain", text);
 75 |     smartdelay(500);
 76 |   });
 77 |   //Home page. Contents of 'page' is in mainpage.h
 78 |   server.on("/", []() {
 79 |    server.send(200, "text/html", page);
 80 |   });
 81 |   //JavaScript! Contents of 'javascript' is in jscript.h
 82 |   server.on("/jscript.js", []() {
 83 |    server.send(200, "text/javascript", javascript);
 84 |   });
 85 |   //CSS! Contents of 'style' is in style.h
 86 |   server.on("/style.css", []() {
 87 |    server.send(200, "text/css", style);
 88 |   });
 89 |   //start web server
 90 |   server.begin();
 91 |   //Just stating things
 92 |   Serial.println("HTTP server started");
 93 | }
 94 | 
 95 | void loop(void) {
 96 |   //Make the ESP32 always handle web clients
 97 |   server.handleClient();
 98 | }
 99 | 
100 | // Function for converting gps float values to string
101 | String floatToString(float val, float invalid, int len, int prec) {
102 |   String out = "";
103 |   if (val == invalid) {
104 |     while (len-- > 1){
105 |       return "inv" ;
106 |     }
107 |   }
108 |   else{
109 |     for (int i = 0; i < 10; i++) {
110 |        dtostrf(val, len, prec, buff);  
111 |        out += buff;
112 |        return out;
113 |     }
114 |   }
115 | }
116 | 
117 | static void smartdelay(unsigned long ms)
118 | {
119 |   unsigned long start = millis();
120 |   do 
121 |   {
122 |     while (ss.available())
123 |       gps.encode(ss.read());
124 |   } while (millis() - start < ms);
125 | }
126 | 


--------------------------------------------------------------------------------
/esp32-gmaps-local/jscript.h:
--------------------------------------------------------------------------------
 1 | const String javascript PROGMEM = "let map;"
 2 | "var mrkr = null;"
 3 | "var lat = null;"
 4 | "var lng = null;"
 5 | "var myLocation = null;"
 6 | 
 7 | "function getPosition(){"
 8 |     "xmlhttp=new XMLHttpRequest();"
 9 |     "xmlhttp.open('GET','/loc',false);"
10 |     "xmlhttp.send();"
11 | 
12 |     "var data = xmlhttp.responseText;"
13 |     "console.log(data);"
14 |     "vals = data.split(',');"
15 |     "lat = parseFloat(vals[0]);"
16 |     "lng = parseFloat(vals[1]);"
17 |     
18 |     "changeMarkerPosition();"
19 | "}"
20 | 
21 | "function changeMarkerPosition() {"
22 |  
23 |     "myLocation = new google.maps.LatLng(lat, lng);"
24 |     "console.log(myLocation);"
25 |     "mrkr.setPosition(myLocation);"
26 |     "map.setCenter(myLocation);"
27 | "}"
28 | 
29 | "function initMap() {"
30 |   "map = new google.maps.Map(document.getElementById('map'), {"
31 |     "center: myLocation,"
32 |     "zoom: 19,"
33 |   "});"
34 | 
35 |   "mrkr = new google.maps.Marker({"
36 |     "position: myLocation,"
37 |     "map,"
38 |     "title: 'My Location',"
39 |   "});"
40 | 
41 |   "setInterval(getPosition,1000);"
42 | "}";
43 | 


--------------------------------------------------------------------------------
/esp32-gmaps-local/mainpage.h:
--------------------------------------------------------------------------------
 1 | const String page PROGMEM = "<!DOCTYPE html>"
 2 | "<html>"
 3 |   "<head>"
 4 |     "<title>ESP32 Map</title>"
 5 |     "<script src='https://polyfill.io/v3/polyfill.min.js?features=default'></script>"
 6 |     "<link rel='stylesheet' type='text/css' href='/style.css' />"
 7 |     "<script src='/jscript.js'></script>"
 8 |   "</head>"
 9 |   "<body>"
10 |     "<div id='map'></div>"
11 | 
12 |     "<!-- Async script executes immediately and must be after any DOM elements used in callback. -->"
13 |     "<script"
14 |       " src='https://maps.googleapis.com/maps/api/js?key=<Google Maps API Key>&callback=initMap&v=weekly'"
15 |       " async"
16 |     "></script>"
17 |   "</body>"
18 | "</html>";
19 | 


--------------------------------------------------------------------------------
/esp32-gmaps-local/style.h:
--------------------------------------------------------------------------------
 1 | const String style PROGMEM  = "#map {"
 2 |         "height: 100%;"
 3 |       "}"
 4 |       
 5 |       "html,"
 6 |       "body {"
 7 |         "height: 100%;"
 8 |         "margin: 0;"
 9 |         "padding: 0;"
10 |       "}";
11 | 


--------------------------------------------------------------------------------