كيفية دمج واجهة برمجة تطبيقات خرائط Google: دليل خطوة بخطوة

واجهة برمجة تطبيقات خرائط Google هي أداة قوية تتيح للمطورين دمج خرائط Google في تطبيقاتهم وتخصيص الخرائط لتلبية احتياجاتهم المحددة. توفر واجهة البرمجة مجموعة واسعة من الميزات، بما في ذلك الترميز الجغرافي، والاتجاهات، والأماكن، مما يسهل إنشاء تطبيقات تعتمد على الموقع. في هذه المقالة، سنقدم دليلًا شاملاً حول كيفية استخدام واجهة برمجة تطبيقات خرائط Google، مع تعليمات تفصيلية خطوة بخطوة وكود أمثلة.

البدء في استخدام واجهة برمجة تطبيقات خرائط Google

للبدء في استخدام واجهة برمجة تطبيقات خرائط Google، ستحتاج إلى الحصول على مفتاح API من وحدة تحكم Google السحابية. اتبع هذه الخطوات لإنشاء مشروع جديد وتمكين واجهة برمجة تطبيقات JavaScript للخرائط:

اذهب إلى وحدة تحكم Google السحابية (https://console.cloud.google.com/) وقم بتسجيل الدخول باستخدام حساب Google الخاص بك.
قم بإنشاء مشروع جديد أو حدد مشروعًا موجودًا.
قم بتمكين واجهة برمجة تطبيقات JavaScript للخرائط من خلال التنقل إلى "APIs & Services" > "المكتبة" والبحث عن "واجهة برمجة تطبيقات JavaScript للخرائط". انقر على "تمكين" لتمكين واجهة البرمجة لمشروعك.
اذهب إلى "APIs & Services" > "بيانات الاعتماد" وانقر على "إنشاء بيانات اعتماد". حدد "مفتاح API" كنوع البيانات الاعتمادية.
انسخ مفتاح API واحفظه بأمان، حيث ستحتاج إليه لاستخدام واجهة برمجة تطبيقات JavaScript للخرائط.

تضمين خريطة باستخدام واجهة برمجة تطبيقات خرائط Google

لتضمين خريطة Google في صفحة الويب الخاصة بك، ستحتاج إلى تضمين نص واجهة برمجة تطبيقات JavaScript للخرائط في ملف HTML الخاص بك وإنشاء عنصر <div> مع ID لاستيعاب الخريطة. إليك مثال:

<!DOCTYPE html>
<html>
  <head>
    <title>تضمين خريطة</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </body>
</html>

في هذا المثال، نقوم بتضمين نص واجهة برمجة تطبيقات JavaScript للخرائط مع مفتاح API الخاص بنا. كما نقوم أيضًا بإنشاء عنصر <div> مع ID "map" ونحدد ارتفاعه وعرضه باستخدام CSS. أخيرًا، نقوم بتعريف دالة تسمى initMap() التي تنشئ كائن جديد من google.maps.Map وتحدد المركز ومستوى التكبير للخريطة.

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

لإضافة علامات إلى خريطتك، يمكنك استخدام فئة google.maps.Marker. إليك مثال:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  const marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
    title: "مرحبا بالعالم!",
  });
}

في هذا المثال، نقوم بإنشاء كائن جديد من google.maps.Marker ونحدد موقعه والخريطة والعنوان. خاصية position هي كائن يحتوي على خاصيتين lat وlng اللتين تحددان خط العرض وخط الطول للعلامة. خاصية map تحدد الخريطة التي يجب إضافة العلامة إليها، وخاصية title تحدد النص الذي يجب عرضه عند تمرير الماوس فوق العلامة.

الترميز الجغرافي باستخدام واجهة برمجة تطبيقات خرائط Google

الترميز الجغرافي هو عملية تحويل عنوان أو اسم موقع إلى إحداثيات خط العرض وطول. يمكنك استخدام فئة google.maps.Geocoder لأداء الترميز الجغرافي. إليك مثال:

function geocodeAddress() {
  const geocoder = new google.maps.Geocoder();
  const address = document.getElementById("address").value;

  geocoder.geocode({ address: address }, (results, status) => {
    if (status === "OK") {
      const map = new google.maps.Map(document.getElementById("map"), {
        center: results[0].geometry.location,
        zoom: 12,
      });

      const marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
      });
    } else {
      alert("لم يكن الترميز الجغرافي ناجحًا للسبب التالي: " + status);
    }
  });
}

في هذا المثال، نقوم بإنشاء كائن جديد من google.maps.Geocoder ونستدعي طريقتها geocode() بكائن يحدد العنوان الذي سيتم ترميزه. تأخذ طريقة geocode() دالة رد النداء التي تُستدعى مع نتائج طلب الترميز الجغرافي. إذا كانت الحالة "OK"، نقوم بإنشاء خريطة جديدة وعلامة باستخدام إحداثيات خط العرض والطول التي أرجعها الترميز الجغرافي. إذا حدث خطأ، نقوم بعرض تنبيه برسالة الخطأ.

الحصول على الاتجاهات باستخدام واجهة برمجة تطبيقات خرائط Google

توفر واجهة برمجة تطبيقات خرائط Google أيضًا وظيفة الاتجاهات، والتي تمكنك من حساب الطرق بين المواقع. إليك مثال:

function calculateRoute() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();

  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  directionsRenderer.setMap(map);

  const request = {
    origin: document.getElementById("origin").value,
    destination: document.getElementById("destination").value,
    travelMode: google.maps.TravelMode.DRIVING,
  };

  directionsService.route(request, (result, status) => {
    if (status == "OK") {
      directionsRenderer.setDirections(result);
    } else {
      alert("فشل طلب الاتجاهات بسبب " + status);
    }
  });
}

في هذا المثال، نقوم بإنشاء كائن جديد من google.maps.DirectionsService للتعامل مع طلب الاتجاهات وكائن google.maps.DirectionsRenderer لعرض الاتجاهات على الخريطة. ثم نقوم بإنشاء خريطة جديدة ونحدد DirectionsRenderer لعرض الاتجاهات على الخريطة. نقوم بإنشاء كائن request الذي يحدد عناوين الانطلاق والوصول ووضع السفر (في هذه الحالة، القيادة). ثم نستدعي طريقة route() لكائن DirectionsService مع كائن الطلب ودالة رد النداء. إذا كانت الحالة "OK"، نقوم بتحديد الاتجاهات على كائن DirectionsRenderer. إذا حدث خطأ، نقوم بعرض تنبيه برسالة الخطأ.

الحصول على الأماكن باستخدام واجهة برمجة تطبيقات خرائط Google

توفر واجهة برمجة تطبيقات خرائط Google أيضًا واجهة برمجة تطبيقات الأماكن التي تسمح لك بالبحث عن الأماكن واسترجاع المعلومات عنها. إليك مثال:

function searchPlaces() {
  const service = new google.maps.places.PlacesService(map);

  const request = {
    query: document.getElementById("query").value,
    fields: ["name", "geometry"],
  };

  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (let i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }

      map.setCenter(results[0].geometry.location);
    }
  });
}

function createMarker(place) {
  const marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
  });

  google.maps.event.addListener(marker, "click", () => {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

في هذا المثال، نقوم بإنشاء كائن جديد من google.maps.places.PlacesService ونحدد كائن request الذي يحدد استعلام البحث والحقول لاسترجاعها لكل مكان. ثم نستدعي طريقة findPlaceFromQuery() لكائن PlacesService مع كائن الطلب ودالة رد النداء. إذا كانت الحالة "OK"، نتكرر عبر النتائج وننشئ علامة لكل مكان باستخدام دالة createMarker(). نقوم أيضًا بتحديد مركز الخريطة على موقع أول نتيجة. تقوم دالة createMarker() بإنشاء كائن جديد من google.maps.Marker وتضيف مستمع حدث النقر إلى العلامة. عند النقر على العلامة، تعرض نافذة معلومات باسم المكان.

استخدام Apidog لاستدعاءات API

لنقل إنك تقوم ببناء تطبيق React.js يستخرج البيانات من واجهة برمجة تطبيقات الطقس. إليك كيفية استخدام Apidog لإدارة استدعاءات API:

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: في محرر الاختبار، أدخل عنوان URL لنقطة النهاية لواجهة برمجة التطبيقات، اختر طريقة HTTP، وأضف أي رؤوس أو معلمات أو بيانات جسم تحتاجها. على سبيل المثال، يمكنك اختبار المسار الذي يعيد رسالة بسيطة قمنا بإنشائها سابقًا:

الخطوة 3: انقر على زر الإرسال وراجع نتيجة الاختبار الخاص بك. يجب أن ترى رمز الحالة ووقت الاستجابة وجسم الاستجابة لواجهة برمجة التطبيقات الخاصة بك. على سبيل المثال، يجب أن ترى شيئًا مثل هذا:

Apidog هي أداة رائعة لاختبار واجهات برمجة التطبيقات الخاصة بك، حيث تساعدك على ضمان الجودة والموثوقية والأداء لخدمات الويب الخاصة بك. كما أنها توفر لك الوقت والجهد، حيث لا تحتاج إلى كتابة أي كود أو تثبيت أي برامج لاختبار واجهات برمجة التطبيقات الخاصة بك. يمكنك فقط استخدام متصفحك والاستمتاع بواجهة Apidog سهلة الاستخدام وميزاته.

الخلاصة

في هذه المقالة، قدمنا دليلًا شاملاً حول كيفية استخدام واجهة برمجة تطبيقات خرائط Google، مع تعليمات تفصيلية خطوة بخطوة وكود أمثلة. لقد تناولنا موضوعات تضمين الخريطة، وإضافة العلامات، والترميز الجغرافي، والاتجاهات، والأماكن. مع هذه المعرفة، يجب أن تكون قادرًا على إنشاء تطبيقات قوية تعتمد على الموقع باستخدام واجهة برمجة تطبيقات خرائط Google.

💡

وتذكر - إذا كنت تهدف إلى تحسين تطوير API لديك، جرب Apidog. تم تصميم هذه الأداة القوية لتحسين مشاريع واجهة برمجة التطبيقات الخاصة بك وما بعدها. احصل عليها مجانًا واكتشف كيف يمكن أن تعمل على تحسين سير عملك وزيادة كفاءتك.

زر