كيفية إنشاء بعض المشاريع البسيطة باستخدام واجهة برمجة تطبيقات خرائط Google
كيفية إنشاء بعض المشاريع البسيطة باستخدام واجهة برمجة تطبيقات خرائط Google

كيفية إنشاء بعض المشاريع البسيطة باستخدام واجهة برمجة تطبيقات خرائط Google

  • 178 المشاهدات
  • قراءة دقيقة واحدة
في هذه المقالة، ستتعلم كيفية إنشاء خرائط تفاعلية وتحسين المسارات وتحليل بيانات الموقع باستخدام واجهة برمجة تطبيقات خرائط Google على GCP.
مسؤل
  • 27 أكتوبر 2025
0 الأسهم
0
0
0
0
0
الأسهم
0
0
0
0

المشروع 1: "محدد موقع المتجر" على الويب مع البحث عن الموقع والإكمال التلقائي

طلب: إظهار جميع الفروع/الممثلين على الخريطة، والبحث السريع عن العناوين/المواقع القريبة.
واجهات برمجة التطبيقات: خرائط JavaScript API + الأماكن (الإكمال التلقائي/التفاصيل). جوجل للمطورين

هيكل بسيط (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>

  • نقطة مهمة: رمز الجلسة في الإكمال التلقائي، من الصحيح تجميع عمليات البحث في جلسة وفاتورة. إذا كنت تستخدم أداة "جاهز"، فستكون إدارة الجلسة تلقائية؛ أما إذا كنت تستخدم الخدمة الخام، فيجب عليك رمز الإكمال التلقائي للجلسة بناء (كما هو مذكور أعلاه). جوجل للمطورين+2جوجل للمطورين+2

  • إذا كنت تستخدم نمط السحابة، معرف الخريطة قم بتعيينه على معرف الخريطة الخاص بك. جوجل للمطورين+1

  • تقييد المفتاح. (مراجع HTTP + قيود API لـ Places/Maps JS).

المشروع الثاني: "مسار متعدد التوقفات مع ترتيب توقف مُحسَّن"«

طلب: خدمات توصيل/لوجستية خفيفة، مبيعات تسويقية، توجيه سريع مع مراعاة الترتيب الأمثل للتوقفات.
واجهة برمجة التطبيقات: طرق API (مسارات الحوسبة مع تحسين ترتيب نقطة الطريق). جوجل للمطورين+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 الذي يعطي الترتيب الأمثل للتوقفات المتوسطة. جوجل للمطورين

  • بالنسبة لمصفوفة الوقت/المسافة متعددة الأصول والوجهات، يمكنك أيضًا استخدام مصفوفة مسار الحوسبة الاستخدام (في نفس مجموعة API للطرق) جوجل للمطورين

  • مرة أخرى تقييد المفتاح على عنوان IP الخاص بالخادم. إذا تم تقديم الطلب من الخلفية. جوجل للمطورين

المشروع 3: "التحقق من صحة العنوان في مقدمة/ظهر الطلب"«

طلب: إتمام عملية الشراء من المتجر عبر الإنترنت، ومنع أخطاء إرجاع الطرود/التسليم.
واجهة برمجة التطبيقات: واجهة برمجة تطبيقات التحقق من العنوان. جوجل للمطورين+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"] }
}'

  • يتضمن الإخراج جودة/توحيد مكونات العنوان وأفضل ترميز جغرافي؛ ويمكنك اقتراح تحسينات للمستخدم. جوجل للمطورين

مثال على واجهة Python الخلفية (العميل الرسمي)

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)

  • توجد مكتبة Python رسمية للتحقق من صحة العنوان. جوجل كلاود

(اختياري) نمط السحابة ومعرف الخريطة

إذا كنت تريد واجهة مستخدم ذات علامة تجارية، في وحدة التحكم واحدة نمط الخريطة المستندة إلى السحابة أنشئ، واحصل على مُعرِّف الخريطة، ثم عيِّنه في عميلك (يدعم كلاً من Web JS وStatic/Android/iOS). يمكنك تحديث النمط من وحدة التحكم دون تغيير الكود. للحصول على إلهام سريع، معالج التصميم يرى.

في هذه المقالة:
,,
تم كتابة التدوينة بواسطة:
يتبع
اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

المقال السابق
المقال التالي
قد يعجبك أيضاً