Wie man ein paar einfache Projekte mit der Google Maps API erstellt
Wie man ein paar einfache Projekte mit der Google Maps API erstellt

Wie man ein paar einfache Projekte mit der Google Maps API erstellt

  • 178-Ansichten
  • 2-Minutenlesung
In diesem Artikel erfahren Sie, wie Sie mit der Google Maps API auf GCP interaktive Karten erstellen, Routen optimieren und Standortdaten analysieren.
Administrator
  • 27. Oktober 2025
0 Aktien
0
0
0
0
0
Aktien
0
0
0
0

Projekt 1: Webbasierter «Filialfinder» mit Standortsuche und Autovervollständigung

Anwendung: Alle Filialen/Vertreter auf der Karte anzeigen, Schnellsuche nach Adressen/Standorten in der Nähe.
APIs: Maps JavaScript API + Orte (Autocomplete/Details). Google für Entwickler

Einfaches Grundgerüst (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>

  • Wichtiger Punkt: Sitzungstoken In der Autovervollständigung ist es korrekt, Suchanfragen nach Sitzung und Abrechnung zu gruppieren. Bei Verwendung des Ready-Widgets erfolgt die Sitzungsverwaltung automatisch; bei Verwendung des Raw-Dienstes müssen Sie dies manuell tun. AutocompleteSessionToken Erstellen (wie oben). Google für Entwickler+2Google für Entwickler+2

  • Wenn Sie den Wolkenstil verwenden, mapId Stellen Sie es auf Ihre Karten-ID ein. Google für Entwickler+1

  • Den Schlüssel einschränken. (HTTP-Referrer + API-Beschränkung für Places/Maps JS).

Projekt 2: «Mehrere Haltestellenrouten mit optimierter Haltestellenreihenfolge»

Anwendung: Leichte Kurier-/Logistikdienstleistungen, Vertrieb für Marketingfachleute, schnelle Routenplanung unter Berücksichtigung der optimalen Reihenfolge der Stopps.
API: Routen-API (Routen berechnen Mit Wegpunktreihenfolge optimieren). Google für Entwickler+1

Beispielanfrage (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"}
]
}'

  • Die Antwort beinhaltet routes.optimizedIntermediateWaypointIndex wodurch die optimale Reihenfolge der Zwischenstopps ermittelt wird. Google für Entwickler

  • Für die Zeit-/Entfernungsmatrix mit mehreren Ursprüngen und Zielen können Sie auch Folgendes verwenden: berechneRoutenmatrix Verwenden Sie (im selben Routen-API-Set) Google für Entwickler

  • Wieder Beschränken Sie den Schlüssel auf die Server-IP-Adresse. Wenn die Anfrage vom Backend kommt. Google für Entwickler

Projekt 3: «Adressvalidierung auf der Vorder- und Rückseite der Bestellung»

Anwendung: Vermeidung von Fehlern bei der Paketrückgabe/Lieferung im Online-Shop.
API: API zur Adressvalidierung. Google für Entwickler+1

Einfaches Beispiel (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"] }
}'

  • Die Ausgabe umfasst die Qualitätssicherung/Standardisierung der Adresskomponenten und die optimale Geokodierung; Sie können dem Benutzer Verbesserungsvorschläge unterbreiten. Google für Entwickler

Python-Backend-Beispiel (offizieller 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)

  • Es gibt eine offizielle Python-Bibliothek zur Adressvalidierung. Google Cloud

(Optional) Wolkenstil und Karten-ID

Wenn Sie eine markenspezifische Benutzeroberfläche wünschen, in der Konsole Cloud-basierter Kartenstil Erstellen Sie eine Karte, rufen Sie die Karten-ID ab und legen Sie sie in Ihrem Client fest (sowohl WebJS als auch statische Anwendungen für Android und iOS werden unterstützt). Sie können den Stil über die Konsole aktualisieren, ohne den Code zu ändern. Zur schnellen Inspiration: Styling-Zauberer Sehen.

In diesem Artikel:
,,
Beitrag verfasst von:
Folgen
Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Vorheriger Artikel
Nächster Artikel
Das könnte Ihnen auch gefallen