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

در این مقاله یاد می‌گیرید چطور با Google Maps API روی GCP نقشه‌های تعاملی بسازید، مسیرها را بهینه کنید و داده‌های مکانی را تحلیل کنید.
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 را ببین.

دیدگاهتان را بنویسید

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


شاید دوست داشته باشید
The Complete Guide to Google Cloud Translation API — Features, Solutions, Code Samples, and Costs

راهنمای کامل Google Cloud Translation API — قابلیت‌ها، راهکارها، نمونه کد و هزینه‌ها

در جهانی که کسب‌وکارها و اپلیکیشن‌ها به کاربران در زبان‌های مختلف سرویس می‌دهند، نیاز به ترجمه‌ی پویا و دقیق محتوا به چند زبان بیشتر شده است. سرویس Cloud Translation API از Google Cloud این امکان را می‌دهد تا متن‌ها، اسناد یا محتوای وب‌سایت/اپلیکیشن را به‌صورت برنامه‌پذیر (API) بین زبان‌ها انتقال دهی، با بهره‌گیری از مدل‌های جدید یادگیری ماشین. در این مقاله، ابتدا قابلیت‌های کلیدی را بررسی می‌کنیم، سپس به راهکارهای عملی می‌پردازیم، بعد نمونه‌کد می‌بینیم، مخاطبان این سرویس را تحلیل می‌کنیم، هزینه‌ها را مرور می‌کنیم، و در پایان نکات عملی برای پیاده‌سازی را ذکر می‌کنیم.

هرآنچه باید درباره Firestore API Google Cloud بدانید

Google Firestore یکی از محبوب‌ترین دیتابیس‌های NoSQL ابری دنیاست که توسط Firebase و Google Cloud ارائه می‌شود. Firestore مناسبِ ساخت اپلیکیشن‌های Real-Time، مقیاس‌پذیر، بدون نیاز به مدیریت سرور و بسیار سریع است. این دیتابیس با REST API، gRPC، و SDKهای مختلف در دسترس است و از سمت توسعه‌دهندگان موبایل، وب و بک‌اند بسیار مورد استقبال قرار گرفته است.در این مقاله، به شکل کامل و جامع Firestore را معرفی می‌کنیم، با مثال‌های عملی، پروژه‌هایی که می‌توان با آن ساخت، نمونه اپلیکیشن‌های موفق، معماری، امنیت و بهترین شیوه‌ها.