Google Haritalar API'si ile birkaç basit proje nasıl oluşturulur?
Google Haritalar API'si ile birkaç basit proje nasıl oluşturulur?

Google Haritalar API'si ile birkaç basit proje nasıl oluşturulur?

  • 109 görüntüleme
  • 2 dakikalık okuma
Bu makalede, GCP'de Google Haritalar API'si ile etkileşimli haritaların nasıl oluşturulacağını, rotaların nasıl optimize edileceğini ve konum verilerinin nasıl analiz edileceğini öğreneceksiniz.
yönetici
  • 27 Ekim 2025
0 Hisse senetleri
0
0
0
0
0
Hisse senetleri
0
0
0
0

Proje 1: Konum Arama + Otomatik Tamamlama Özellikli Web "Mağaza Bulucu"

Başvuru: Haritada tüm şubeleri/temsilcileri görüntüleyin, yakındaki adresleri/konumları hızlıca arayın.
API'ler: Haritalar JavaScript API + Yerler (Otomatik Tamamlama/Ayrıntılar). Geliştiriciler için Google

Basit iskelet (HTML + JS)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mağaza Bulucu</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="Yakınımdaki Kafe/Dükkan..." size="40" />
</div>
<div id="map"></div>
</body>
</html>

  • Önemli nokta: Oturum Simgesi Otomatik Tamamlama'da, aramaları bir oturum ve faturalandırmaya gruplamak doğrudur. Hazır widget'ı kullanırsanız, oturum yönetimi otomatiktir; ham hizmeti kullanırsanız, Otomatik TamamlamaSessionToken (Yukarıdaki gibi) inşa edin. Geliştiriciler için Google+2Geliştiriciler için Google+2

  • Bulut stilini kullanırsanız, harita kimliği Bunu Harita Kimliğinize ayarlayın. Geliştiriciler için Google+1

  • Anahtarı kısıtla. (HTTP yönlendiricileri + Yerler/Haritalar JS için API kısıtlaması).

Proje 2: "Optimize edilmiş duraklama sırasına sahip çok duraklı rota"«

Başvuru: Hafif kurye/lojistik, pazarlamacı satış, durakların optimal sırasını göz önünde bulundurarak hızlı rotalama.
API: Rotalar API'si (hesaplamaRotaları İle optimizeWaypointOrder). Geliştiriciler için Google+1

Örnek istek (cURL – REST)

curl -X POST "https://routes.googleapis.com/directions/v2:computeRoutes" \ -H "İçerik Türü: application/json" \ -H "X-Goog-Api-Anahtarı: $API_KEY" \ -H "X-Goog-AlanMaskesi: routes.optimizedIntermediateWaypointIndex,routes.distanceMeters,routes.duration" \ -d '{ "origin": {"address": "Tahran"}, "destination": {"address": "Tahran"}, "travelMode": "DRIVE", "optimizeWaypointOrder": true, "intermediates": [ {"address": "Karaj"}, {"address": "Qom"}, {"address": "Varamin"}, {"address": "Ekbatan, Tahran"} ] }'"

  • Cevap şunları içerir: rotalar.optimize edilmişAra Yol Noktası Endeksi ara durakların en uygun sırasını verir. Geliştiriciler için Google

  • Çoklu köken-çoklu hedef zaman/mesafe matrisi için şunları da kullanabilirsiniz: hesaplamaRouteMatrix (Aynı Rotalar API kümesinde) kullanın Geliştiriciler için Google

  • Tekrar Anahtarı sunucu IP'sine sınırlayın. Eğer istek arka uçtan yapılıyorsa. Geliştiriciler için Google

Proje 3: «Siparişin Önünde/Arkasında Adres Doğrulaması»

Başvuru: Online mağaza ödeme, paket iade/teslimat hatası önleme.
API: Adres Doğrulama API'si. Geliştiriciler için Google+1

Basit örnek (cURL – REST)

curl -X POST "https://addressvalidation.googleapis.com/v1:validateAddress?key=$API_KEY" \ -H "İçerik Türü: application/json" \ -d '{ "address": { "regionCode": "IR", "locality": "Tahran", "addressLines": ["Valiasr St, No. 123"] } }'"

  • Çıktı, adres bileşenlerinin kalitesini/standardizasyonunu ve en iyi coğrafi kodu içerir; kullanıcıya iyileştirmeler önerebilirsiniz. Geliştiriciler için Google

Python arka uç örneği (resmi istemci)

google.maps'ten addressvalidation_v1'i av olarak içe aktar istemci = av.AddressValidationClient() req = av.ValidateAddressRequest( address=av.PostalAddress(region_code="IR", locality="Tahran", address_lines=["Valiasr St, No. 123"]) ) resp = client.validate_address(request=req) print(resp.result.verdict, resp.result.address.formatted_address)

  • Adres Doğrulaması için resmi bir Python kütüphanesi bulunmaktadır. Google Bulut

(İsteğe bağlı) Bulut stili ve Harita Kimliği

Markalı bir kullanıcı arayüzü istiyorsanız, konsolda Bulut tabanlı harita stili Harita Kimliği oluşturun, alın ve istemcinizde ayarlayın (hem Web JS hem de Statik/Android/iOS desteklenir). Kodu değiştirmeden stili konsoldan güncelleyebilirsiniz. Hızlı ilham almak için: Stil Sihirbazı Görmek.

[Toplam: 1   Ortalama: 5/5]
Bu makalede:
,,
Gönderiyi yazan:
Takip etmek
Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Önceki Makale
Sonraki Makale
Ayrıca Şunları da Beğenebilirsiniz

Three.js nedir?

  • 650 görüntüleme
  • 11 dakikalık okuma
Giriş Three.js birçok şey yapar ve onunla nasıl çalışılacağı biraz kafa karıştırıcı olabilir…
0 Hisse senetleri
0
0
0