+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Integrate Google Maps in React for Real-Time Location Tracking (/thread-103631.html)
[Tut] Integrate Google Maps in React for Real-Time Location Tracking - xSicKxBot - 12-11-2025
[Tut] Integrate Google Maps in React for Real-Time Location Tracking
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2025/12/integrate-google-maps-in-react-for-real-time-location-tracking.jpg" width="550" height="288" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 28th, 2025.</div>
<p>Integrating Google Maps into a React app is a powerful location-based feature. It helps for live user tracking to delivery routes, geo-fencing, and real-time movement progression. It is one of the simplest jobs with the help of the Google Maps JavaScript API and React libraries.</p>
<p>Real-time location tracking improves the usability of your apps. It can be implemented for <a href="https://phppot.com/react/react-dynamic-dashboard-tutorial/">dashboards</a>, for tracking location on Duty, or anything that involves dynamic location-based requirements.</p>
<p>This React example helps to integrate Google Maps into React. It <a href="https://phppot.com/php/how-to-draw-path-on-map-using-google-maps-direction-api/">renders dynamic maps to the UI</a> and displays markers to pinpoint the live location. It continuously updates the user’s position using the browser’s Geolocation API.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24737" src="https://phppot.com/wp-content/uploads/2025/11/react-google-maps-realtime-location-tracking-550x288.jpeg" alt="React Google Maps Realtime Location Tracking" width="550" height="288" srcset="https://phppot.com/wp-content/uploads/2025/11/react-google-maps-realtime-location-tracking-550x288.jpeg 550w, https://phppot.com/wp-content/uploads/2025/11/react-google-maps-realtime-location-tracking-300x157.jpeg 300w, https://phppot.com/wp-content/uploads/2025/11/react-google-maps-realtime-location-tracking-768x402.jpeg 768w, https://phppot.com/wp-content/uploads/2025/11/react-google-maps-realtime-location-tracking.jpeg 1200w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h2>Google Maps Integration steps</h2>
<p>These are the few steps to enable required Google API services and <a href="https://phppot.com/php/how-to-get-google-recaptcha-site-and-secret-key/">configure the key credentials</a> with the React App. This process builds a channel between the enduser and the Google cloud services for which they are registered with.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24652" src="https://phppot.com/wp-content/uploads/2025/11/google-cloud-Api-library-services-550x323.jpg" alt="google cloud api library services" width="550" height="323" srcset="https://phppot.com/wp-content/uploads/2025/11/google-cloud-Api-library-services-550x323.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-Api-library-services-300x176.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-Api-library-services-768x451.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-Api-library-services.jpg 1460w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<ol>
<li>Login with <a href="https://developers.google.com/" target="_blank" rel="noopener">Google Cloud Console</a> and create a new project.</li>
<li>Choose <strong>APIs and Services</strong> and enable <strong>Maps JavaScript API</strong>.</li>
<li>Go to <strong>Credentials</strong> menu and <strong>CREATE CREDENTIALS -> API Key</strong> to generate API key.</li>
<li>Install <strong>React Google Maps</strong> library in your app using <code>npm install @react-google-maps/api</code>.</li>
<li>Configure this key to your React app when loading <strong>React Google Maps</strong> JS library.</li>
</ol>
<p>The credentials page shows the list of API keys generated. You can restrict the keys for specific domains or for using particular Google API services.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24656" src="https://phppot.com/wp-content/uploads/2025/11/google-cloud-api-credential-550x154.jpg" alt="google cloud api credential" width="550" height="154" srcset="https://phppot.com/wp-content/uploads/2025/11/google-cloud-api-credential-550x154.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-api-credential-300x84.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-api-credential-768x215.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-api-credential-1536x429.jpg 1536w, https://phppot.com/wp-content/uploads/2025/11/google-cloud-api-credential.jpg 1865w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<h2>Rendering Google Maps with current location</h2>
<p>The <code>TrackLocation</code> JSX shows HTML components for displaying the Google Map and a location search option.</p>
<p>If the location search is not applied, it is showing the <a href="https://phppot.com/php/adding-custom-markers-on-map-using-google-maps-javascript-api/">marker on the users current location</a>.</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-24661" src="https://phppot.com/wp-content/uploads/2025/11/react-google-map-landing-page-550x265.jpg" alt="react google map landing page" width="550" height="265" srcset="https://phppot.com/wp-content/uploads/2025/11/react-google-map-landing-page-550x265.jpg 550w, https://phppot.com/wp-content/uploads/2025/11/react-google-map-landing-page-300x144.jpg 300w, https://phppot.com/wp-content/uploads/2025/11/react-google-map-landing-page-768x370.jpg 768w, https://phppot.com/wp-content/uploads/2025/11/react-google-map-landing-page-1536x740.jpg 1536w, https://phppot.com/wp-content/uploads/2025/11/react-google-map-landing-page.jpg 1904w" sizes="auto, (max-width: 550px) 100vw, 550px"></p>
<p class="code-heading"><code>src/components/TrackLocation.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">import { useState } from "react";
import SearchBox from "./SearchBox";
import MapContainerComponent from "./MapContainerComponent"; export default function TrackLocation() { const [searchQuery, setSearchQuery] = useState("");
return ( <div style={{ display: "flex" }}> <SearchBox onSearch={setSearchQuery} /> <MapContainerComponent searchQuery={searchQuery} /> </div> );
}
</code></pre>
<h2>React Google Maps Component</h2>
<p>This is the main component which initiates the React Google Maps library by configuring the Google Cloud API service key.</p>
<p>It manages React states for having the Map instance, map marker location and the <a href="https://phppot.com/php/search-location-with-google-maps-javascript-api-place-autocomplete/">searched location</a>. The marker location is depends on two factors. It will be changed dynamically to show the real-time location of the user. Also, it is changed when the search is applied.</p>
<p>With the help of the client side Geo location capabilities, navigator.geolocation gets the latitude and longitude of the user’s position. Then it is used to build the location object to plot the marker to the map.</p>
<p class="code-heading"><code>src/components/MapContainerComponent.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">import { useEffect, useState } from "react";
import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";
import LocationMarker from "./LocationMarker"; export default function MapContainerComponent({ searchQuery }) { const [map, setMap] = useState(null); const [userLocation, setUserLocation] = useState(null); const [searchLocation, setSearchLocation] = useState(null); const { isLoaded } = useJsApiLoader({ googleMapsApiKey: "YOUR API KEY", libraries: ["places"], }); useEffect(() => { if (navigator.geolocation) { const watchId = navigator.geolocation.watchPosition( (pos) => { const newLoc = { lat: pos.coords.latitude, lng: pos.coords.longitude, }; setUserLocation(newLoc); if (map && !searchLocation) { map.setCenter(newLoc); map.setZoom(13); } }, (err) => console.error("Location error:", err), { enableHighAccuracy: true, maximumAge: 1000 } ); return () => navigator.geolocation.clearWatch(watchId); } else { console.error("Geolocation not supported"); } }, [map, searchLocation]); useEffect(() => { if (!searchQuery || !window.google || !map) return; const geocoder = new window.google.maps.Geocoder(); geocoder.geocode({ address: searchQuery }, (results, status) => { if (status === "OK" && results[0]) { const loc = results[0].geometry.location; const newSearchLoc = { lat: loc.lat(), lng: loc.lng() }; setSearchLocation(newSearchLoc); if (userLocation) { const bounds = new window.google.maps.LatLngBounds(); bounds.extend(userLocation); bounds.extend(newSearchLoc); map.fitBounds(bounds); } else { map.setCenter(newSearchLoc); map.setZoom(12); } } else { console.warn("Location not found for:", searchQuery); } }); }, [searchQuery, map, userLocation]); const zoomToLocation = (loc) => { if (!map || !loc) return; map.panTo(loc); map.setZoom(15); }; return ( <div className="map-container"> {isLoaded && ( <GoogleMap mapContainerStyle={{ width: "100%", height: "100vh" }} center={userLocation || { lat: 20.5937, lng: 78.9629 }} zoom={userLocation ? 13 : 5} onLoad={setMap} options={{ streetViewControl: false, mapTypeControl: false, fullscreenControl: false, }}> <LocationMarker position={userLocation} title="Your Location" onClick={() => zoomToLocation(userLocation)} /> <LocationMarker position={searchLocation} title="Tracked Location" onClick={() => zoomToLocation(searchLocation)} /> </GoogleMap> )} {userLocation && ( <button className="floating-btn" onClick={() => zoomToLocation(userLocation)}> My Location </button> )} </div> );
}
</code></pre>
<p>This LocationMarker component is part of the main React component that accepts the users location or searched location. It pins the marker to the Map based on the location details.</p>
<p class="code-heading"><code>src/components/LocationMarker.js</code></p>
<pre class="prettyprint"><code class="language-js">import React from "react";
import { Marker } from "@react-google-maps/api"; export default function LocationMarker({ position, title, onClick }) { return position ? <Marker position={position} title={title} onClick={onClick} /> : null;
}
</code></pre>
<h2>Google Maps Search feature</h2>
<p>The search form contains interface to enter the place to mark on the Map. When the search is applied, the <code class="language-js">LocationMarker</code> rendered with the <code>position:searchLocation</code> shows the marker on the right place.</p>
<p class="code-heading"><code>src/components/SearchBox.jsx</code></p>
<pre class="prettyprint"><code class="language-jsx">import { useState } from "react"; export default function SearchBox({ onSearch }) { const [query, setQuery] = useState(""); const handleSubmit = (e) => { e.preventDefault(); if (query.trim()) onSearch(query); }; return ( <div className="search-sidebar"> <h3 className="sidebar-title">Track Location</h3> <form onSubmit={handleSubmit}> <input type="text" placeholder="Enter a place" value={query} onChange={(e) => setQuery(e.target.value)} className="search-input" /> <button type="submit" className="search-btn"> Search </button> </form> </div> );
}
</code></pre>
<h2>Conclusion</h2>
<p>Real-time location tracking in React becomes easy with the joint capabilities of the Geolocation API and Google Maps. It changes the user’s position on movement. This example enriches user experience with a live movement tracking feature. And, it will be easy to use in a location-based React application that needs to render users’ live locations.</p>
<p><strong>References:</strong></p>
<ol>
<li><a href="https://www.npmjs.com/package/@react-google-maps/api" target="_blank" rel="noopener">React Google Maps API wrapper</a>.</li>
<li><a href="https://developers.google.com/maps/documentation/javascript/best-practices" target="_blank" rel="noopener">Google Maps rendering best practices</a>.</li>
</ol>
<p><a class="download" href="https://phppot.com/downloads/react/react-google-maps-realtime-location-tracking.zip">Download</a></p>
<div class="written-by" readability="9.8427672955975">
<div class="author-photo"> <img loading="lazy" decoding="async" src="https://phppot.com/wp-content/themes/solandra/images/Vincy.jpg" alt="Vincy" width="100" height="100" title="Vincy"> </div>
<div class="written-by-desc" readability="14.764150943396"> Written by <a href="https://phppot.com/about/">Vincy</a>, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials. </div>
</p></div>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Related Tutorials</h2>
</p></div>
<p> <a href="https://phppot.com/react/react-google-maps-realtime-location-tracking/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2025/11/14/integrate-google-maps-in-react-for-real-time-location-tracking/