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

آموزش ساخت چند پروژه ساده با Google Maps API

  • 8 بازدید
  • 2 دقیقه زمان مطالعه
در این مقاله یاد می‌گیرید چطور با Google Maps API روی GCP نقشه‌های تعاملی بسازید، مسیرها را بهینه کنید و داده‌های مکانی را تحلیل کنید.
admin
  • 5 آبان 1404
0 اشتراک گذاری
0
0
0
0
0
اشتراک گذاری
0
0
0
0

پروژه ۱: «Store Locator» وب با جستجوی مکان‌ها + Autocomplete

کاربرد: نمایش همه شعب/نمایندگی‌ها روی نقشه، جستجوی سریع آدرس/محل نزدیک.
APIها: Maps JavaScript API + Places (Autocomplete/Details). Google for Developers

اسکلت ساده (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>

  • نکتهٔ مهم: Session Token در Autocomplete برای گروه‌بندی جستجوها در یک سشن و صورت‌حساب صحیح است. اگر از ویجت آماده استفاده کنی، مدیریت سشن اتوماتیک است؛ اگر از سرویس خام استفاده کنی باید AutocompleteSessionToken بسازی (مثل بالا). Google for Developers+2Google for Developers+2

  • اگر از استایل ابری استفاده می‌کنی، mapId را مطابق Map ID خودت بگذار. Google for Developers+1

  • کلید را محدود کن (HTTP referrers + API restriction برای Places/Maps JS).

پروژه ۲: «مسیر چندتوقفه با بهینه‌سازی ترتیب توقف‌ها»

کاربرد: پیک/لجستیک سبک، فروش بازاریاب‌ها، مسیریابی سریع با درنظرگرفتن ترتیب بهینه توقف‌ها.
API: Routes API (computeRoutes با optimizeWaypointOrder). Google for Developers+1

درخواست نمونه (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"}
]
}'

  • پاسخ شامل routes.optimizedIntermediateWaypointIndex است که ترتیب بهینهٔ توقف‌های میانی را می‌دهد. Google for Developers

  • برای ماتریس زمان/مسافت چندمبدأ-چندمقصد نیز می‌توانی از computeRouteMatrix استفاده کنی. (در همین مجموعه Routes API) Google for Developers

  • باز هم کلید را برای IP سرور محدود کن اگر درخواست از بک‌اند زده می‌شود. Google for Developers

پروژه ۳: «اعتبارسنجی آدرس در فرانت/بکِ سفارش‌گیری»

کاربرد: چک‌اوت فروشگاه آنلاین، جلوگیری از برگشت بسته/خطای ارسال.
API: Address Validation API. Google for Developers+1

نمونهٔ ساده (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"] }
}'

  • خروجی شامل کیفیت/استانداردسازی اجزای آدرس و بهترین ژئوکد است؛ می‌توانی پیشنهاد اصلاح به کاربر بدهی. Google for Developers

نمونهٔ بک‌اند پایتون (کلاینت رسمی)

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)

  • کتابخانهٔ پایتون رسمی برای Address Validation موجود است. Google Cloud

(اختیاری) استایل ابری و Map ID

اگر UI برندسازی‌شده می‌خواهی، در کنسول یک Cloud-based map style بساز، Map ID بگیر و در کلاینتت ست کن (هم وب JS و هم Static/Android/iOS پشتیبانی می‌شود). می‌توانی بدون تغییر کد، استایل را از کنسول آپدیت کنی. برای الهام گرفتن سریع، Styling Wizard را ببین.

[تعداد: 1   میانگین: 5/5]
در این مقاله:
,,
پست نوشته شده توسط:
دنبال کردن
دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مقاله قبل
مقاله بعد
شاید دوست داشته باشید