How to build a few simple projects with Google Maps API
How to build a few simple projects with Google Maps API

How to build a few simple projects with Google Maps API

  • 161 views
  • 2 minute read
In this article, you will learn how to build interactive maps, optimize routes, and analyze location data with the Google Maps API on GCP.
admin
  • October 27, 2025
0 Shares
0
0
0
0
0
Shares
0
0
0
0

Project 1: Web "Store Locator" with Location Search + Autocomplete

Application: Show all branches/representatives on the map, quick search for nearby addresses/locations.
APIs: Maps JavaScript API + Places (Autocomplete/Details). Google for Developers

Simple skeleton (HTML + JS)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Store Locator</title>
<style>#map{height:70vh} .panel{padding:8px}</style>
<script>
let map, marker, autocomplete, sessionToken;

async function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6892, lng: 51.3890 }, zoom: 12, mapId: "YOUR_MAP_ID"
});

// Autocomplete با Session Token برای صورت‌حساب درست
sessionToken = new google.maps.places.AutocompleteSessionToken();
const input = document.getElementById("search");
autocomplete = new google.maps.places.Autocomplete(input, { fields: ["place_id","geometry","name"] });
autocomplete.setOptions({ sessionToken });

autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) return;
const loc = place.geometry.location;
map.panTo(loc); map.setZoom(15);
if (marker) marker.setMap(null);
marker = new google.maps.Marker({ position: loc, map, title: place.name });
});
}
</script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
</head>
<body>
<div class="panel">
<input id="search" placeholder="کافه / فروشگاه نزدیک من..." size="40" />
</div>
<div id="map"></div>
</body>
</html>

  • Important point: Session Token In Autocomplete, it is correct to group searches into a session and billing. If you use the ready widget, session management is automatic; if you use the raw service, you have to AutocompleteSessionToken Build (as above). Google for Developers+2Google for Developers+2

  • If you use the cloud style, mapId Set it to your Map ID. Google for Developers+1

  • Restrict the key. (HTTP referrers + API restriction for Places/Maps JS).

Project 2: "Multi-stop route with optimized stop order"«

Application: Light courier/logistics, marketer sales, fast routing considering the optimal order of stops.
API: Routes API (computeRoutes With optimizeWaypointOrder). Google for Developers+1

Sample request (cURL – REST)

curl -X POST "https://routes.googleapis.com/directions/v2:computeRoutes" \
-H "Content-Type: application/json" \
-H "X-Goog-Api-Key: $API_KEY" \
-H "X-Goog-FieldMask: routes.optimizedIntermediateWaypointIndex,routes.distanceMeters,routes.duration" \
-d '{
"origin": {"address": "Tehran"},
"destination": {"address": "Tehran"},
"travelMode": "DRIVE",
"optimizeWaypointOrder": true,
"intermediates": [
{"address": "Karaj"},
{"address": "Qom"},
{"address": "Varamin"},
{"address": "Ekbatan, Tehran"}
]
}'

  • The answer includes routes.optimizedIntermediateWaypointIndex which gives the optimal order of intermediate stops. Google for Developers

  • For the multi-origin-multi-destination time/distance matrix, you can also use computeRouteMatrix Use (in the same Routes API set) Google for Developers

  • Again Restrict the key to the server IP. If the request is made from the backend. Google for Developers

Project 3: «Address Validation in Front/Back of Order»

Application: Online store checkout, package return/delivery error prevention.
API: Address Validation API. Google for Developers+1

Simple example (cURL – REST)

curl -X POST "https://addressvalidation.googleapis.com/v1:validateAddress?key=$API_KEY" \
-H "Content-Type: application/json" \
-d '{
"address": { "regionCode": "IR", "locality": "Tehran", "addressLines": ["Valiasr St, No. 123"] }
}'

  • The output includes quality/standardization of address components and the best geocode; you can suggest improvements to the user. Google for Developers

Python backend example (official client)

from google.maps import addressvalidation_v1 as av
client = av.AddressValidationClient()
req = av.ValidateAddressRequest(
address=av.PostalAddress(region_code="IR", locality="Tehran", address_lines=["Valiasr St, No. 123"])
)
resp = client.validate_address(request=req)
print(resp.result.verdict, resp.result.address.formatted_address)

  • There is an official Python library for Address Validation. Google Cloud

(Optional) Cloud style and Map ID

If you want a branded UI, in the console one Cloud-based map style Create, get Map ID and set it in your client (both Web JS and Static/Android/iOS supported). You can update the style from the console without changing the code. For quick inspiration, Styling Wizard See.

In this article:
,,
Post written by:
Follow
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article
Next Article
You May Also Like