تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إنشاء خدمة قريبة للبحث عن الأنشطة التجارية باستخدام "منصة خرائط Google" (JavaScript)

1. قبل البدء

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

المتطلبات الأساسية

معرفة أساسية بلغة HTML وCSS وJavaScript
مشروع يتضمّن حساب فوترة (يمكنك اتّباع التعليمات في الخطوة التالية إذا لم يكن لديك هذا الحساب).
بالنسبة إلى خطوة التفعيل أدناه، عليك تفعيل واجهة برمجة تطبيقات JavaScript للخرائط وواجهة برمجة تطبيقات الأماكن.
مفتاح واجهة برمجة تطبيقات للمشروع أعلاه.

بدء استخدام "منصة خرائط Google"

إذا لم يسبق لك استخدام "منصة خرائط Google"، يمكنك اتّباع دليل بدء استخدام "منصة خرائط Google" أو مشاهدة "البدء في استخدام قائمة تشغيل منصة خرائط Google" لإكمال الخطوات التالية:

أنشئ حساب فوترة.
أنشئ مشروعًا.
فعِّل واجهات برمجة تطبيقات ومنصة SDK لمنصة "خرائط Google" (المُدرَجة في القسم السابق).
أنشئ مفتاح واجهة برمجة تطبيقات.

المهام التي ستنفِّذها

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

المتطلبات اللازمة

متصفح ويب، مثل Google Chrome (مُقترح) أو Firefox أو Safari أو Internet Explorer
أداة تعديل النصوص أو الرموز المفضّلة لديك

الحصول على نموذج الرمز

افتح واجهة سطر الأوامر (Terminal على نظام التشغيل MacOS أو Command Prompt (موجّه الأوامر) على نظام التشغيل Windows) ونزّل نموذج الرمز باستخدام الأمر التالي:

git clone https://github.com/googlecodelabs/google-maps-nearby-search-js/

إذا لم يفلح ذلك، انقر على الزر التالي لتنزيل كل الرموز لهذا الدرس التطبيقي، ثم فكّ ضغط الملف:

تنزيل الرمز

غيِّر إلى الدليل الذي استنسخته أو نزّلته.

cd google-maps-nearby-search-js

تحتوي مجلدات stepN على حالة النهاية المطلوبة لكل خطوة من هذا الدرس التطبيقي حول الترميز. وهي متاحة كمرجع. يجب تنفيذ كل الترميز في الدليل المسمى work.

2. إنشاء خريطة باستخدام مركز تلقائي

هناك ثلاث خطوات لإنشاء خريطة Google في صفحة الويب:

إنشاء صفحة HTML
إضافة خريطة
لصق مفتاح واجهة برمجة التطبيقات

1. إنشاء صفحة HTML

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

غيِّر الأدلة إلى مجلد work/. خلال بقية الدرس التطبيقي حول الترميز، أدخِل تعديلاتك في الإصدار في مجلد work/.

cd work

في الدليل work/، استخدِم محرِّر النصوص لإنشاء ملف فارغ باسم index.html.
انسخ الرمز التالي إلى index.html.

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Sushi Finder</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
      background-color: grey;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    /* TODO: Step 4A1: Make a generic sidebar. */
  </style>
</head>

<body>
  <!-- TODO: Step 4A2: Add a generic sidebar -->

  <!-- Map appears here -->
  <div id="map"></div>

  <!-- TODO: Step 1B, Add a map -->
</body>

</html>

افتح الملف index.html في متصفح الويب.

open index.html

2. إضافة خريطة

يعرض لك هذا القسم كيفية تحميل واجهة برمجة تطبيقات JavaScript للخرائط إلى صفحة الويب وكتابة JavaScript الخاص بك الذي يستخدم واجهة برمجة التطبيقات لإضافة خريطة إلى صفحة الويب.

أضِف رمز النص البرمجي هذا حيث ترى  بعد علامة div map وقبل علامة الإغلاق </body>.

step1/index.html

<!-- TODO: Step 1B, Add a map -->
<script>
    /* Note: This example requires that you consent to location sharing when
     * prompted by your browser. If you see the error "Geolocation permission
     * denied.", it means you probably did not give permission for the browser * to locate you. */

    /* TODO: Step 2, Geolocate your user
     * Replace the code from here to the END TODO comment with new code from
     * codelab instructions. */
    let pos;
    let map;
    function initMap() {
        // Set the default location and initialize all variables
        pos = {lat: -33.857, lng: 151.213};
        map = new google.maps.Map(document.getElementById('map'), {
            center: pos,
            zoom: 15
        });
    }
    /* END TODO: Step 2, Geolocate your user */
</script>

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

3- اللصق في مفتاح واجهة برمجة التطبيقات

في السطر بعد ، انسخ قيمة معلمة المفتاح في عنوان URL لمصدر النص البرمجي واستبدلها بمفتاح واجهة برمجة التطبيقات الذي أنشأته أثناء المتطلبات الأساسية.

step1/index.html

<!-- TODO: Step 1C, Get an API key -->
<!-- TODO: Step 3A, Load the Places Library -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

احفظ ملف HTML الذي كنت تعمل عليه.

اختباره

أعد تحميل طريقة عرض المتصفح للملف الذي كنت تعدله. من المفترض أن تظهر لك الخريطة الآن حيث كان المستطيل الرمادي سابقًا. إذا ظهرت لك رسالة خطأ بدلاً من ذلك، تأكّد من استبدال "YOUR_API_KEY" في العلامة <script> النهائية بمفتاح واجهة برمجة التطبيقات الخاص بك. انظر أعلاه لمعرفة كيفية الحصول على مفتاح واجهة برمجة تطبيقات إذا لم يكن لديك مفتاح.

الرمز الكامل للرمز

الرمز الكامل لهذا المشروع حتى وقتنا الحالي متاح على GitHub.

3- رصد الموقع الجغرافي للمستخدم

بعد ذلك، تحتاج إلى عرض الموقع الجغرافي للمستخدم أو الجهاز على خريطة Google باستخدام ميزة HTML5 للموقع الجغرافي في المتصفح مع واجهة برمجة تطبيقات JavaScript لـ "خرائط Google".

إليك مثال على خريطة تعرض موقعك الجغرافي إذا كنت تتصفّح من ماونتن فيو في كاليفورنيا:

ما المقصود بالموقع الجغرافي؟

يشير رصد الموقع الجغرافي إلى تحديد الموقع الجغرافي للمستخدم أو جهاز الحوسبة من خلال مجموعة متنوعة من آليات جمع البيانات. عادةً ما تستخدم معظم خدمات تحديد الموقع الجغرافي عناوين توجيه الشبكة أو أجهزة نظام تحديد المواقع العالمي (GPS) الداخلية لتحديد هذا الموقع. يستخدم هذا التطبيق ميزة الموقع الجغرافي القياسية navigator.geolocation لمتصفّح الويب W3C لتحديد موقع المستخدم.

جرِّب بنفسك

استبدل الرمز بين التعليقات TODO: Step 2, Geolocate your user وEND TODO: Step 2, Geolocate your user بالرمز التالي:

step2/index.html

/* TODO: Step 2, Geolocate your user
    * Replace the code from here to the END TODO comment with this code
    * from codelab instructions. */
let pos;
let map;
let bounds;
let infoWindow;
let currentInfoWindow;
let service;
let infoPane;
function initMap() {
    // Initialize variables
    bounds = new google.maps.LatLngBounds();
    infoWindow = new google.maps.InfoWindow;
    currentInfoWindow = infoWindow;
    /* TODO: Step 4A3: Add a generic sidebar */

    // Try HTML5 geolocation
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
        };
        map = new google.maps.Map(document.getElementById('map'), {
        center: pos,
        zoom: 15
        });
        bounds.extend(pos);

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        infoWindow.open(map);
        map.setCenter(pos);

        /* TODO: Step 3B2, Call the Places Nearby Search */
    }, () => {
        // Browser supports geolocation, but user has denied permission
        handleLocationError(true, infoWindow);
    });
    } else {
    // Browser doesn't support geolocation
    handleLocationError(false, infoWindow);
    }
}

// Handle a geolocation error
function handleLocationError(browserHasGeolocation, infoWindow) {
    // Set default location to Sydney, Australia
    pos = {lat: -33.856, lng: 151.215};
    map = new google.maps.Map(document.getElementById('map'), {
    center: pos,
    zoom: 15
    });

    // Display an InfoWindow at the map center
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
    'Geolocation permissions denied. Using default location.' :
    'Error: Your browser doesn\'t support geolocation.');
    infoWindow.open(map);
    currentInfoWindow = infoWindow;

    /* TODO: Step 3B3, Call the Places Nearby Search */
}
/* END TODO: Step 2, Geolocate your user */
/* TODO: Step 3B1, Call the Places Nearby Search */

اختباره

احفظ ملفك.
إعادة تحميل الصفحة

من المفترض أن يطلب منك المتصفح الآن الحصول على إذن لمشاركة موقعك الجغرافي مع التطبيق.

ويمكنك النقر على حظر مرة واحدة لمعرفة ما إذا كان سيعالج الخطأ بأمان ويظل في وسط سيدني.
أعد التحميل وانقر على سماح لمعرفة ما إذا كان الموقع الجغرافي يعمل وأن ينقل الخريطة إلى موقعك الحالي.

ملاحظة: قد يحفظ المتصفّح الإعداد الأخير للأذونات التي منحتها لهذه الصفحة. لاختيار إذن مختلف (السماح عندما يكون المستخدم قد سبق لك حظره أو حظره عندما كان مسموحًا به سابقًا)، قد تحتاج إلى محو إعدادات المتصفِّح.

في متصفّح Chrome، انقر على تتتبّع هذه الصفحة موقعك الجغرافي في شريط العناوين.

ويؤدي ذلك إلى ظهور نافذة تصف الإعداد الحالي وتسمح لك بمحو هذا الإعداد للزيارات المستقبلية.

انقر على محو هذه الإعدادات للزيارات المستقبلية في أي وقت تريد فيه اختبار التعامل مع حظر مختلف والسماح بأذونات تحديد الموقع الجغرافي.

الرمز الكامل للرمز

الرمز الكامل لهذا المشروع حتى وقتنا الحالي متاح على GitHub.

4. البحث عن الأماكن المجاورة

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

عنصر LatLngBounds يحدّد مساحة بحث مستطيلة
مساحة دائرية محدّدة كتركيبة من خاصية location، وتحديد مركز الدائرة كعنصر LatLng، والنطاق الجغرافي، ويتم قياسه بالأمتار

ابدأ عملية بحث عن مكان قريب من خلال استدعاء طريقة PlacesService nearbySearch()، والتي ستعرض مصفوفة من كائنات PlaceResult.

(أ). تحميل مكتبة الأماكن

أولاً، للوصول إلى خدمات "مكتبة الأماكن"، حدِّث عنوان URL لمصدر النص البرمجي لتقديم المعلمة libraries وإضافة places كقيمة.

step3/index.html

<!-- TODO: Step 3A, Load the Places Library -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">

(ب). يمكنك الاتصال بطلب البحث عن أماكن قريبة والتعامل مع الرد

بعد ذلك، اكتب طلب البحث عن المكان. الحد الأدنى للحقول المطلوبة هو:

الحد الأدنى للحقول المطلوبة هو:

bounds، والذي يجب أن يكون كائن google.maps.LatLngBounds يحدّد مساحة البحث المستطيلة، أو location وradius؛ أما العنصر السابق، فيأخذ كائنًا google.maps.LatLng والعكس صحيح، حيث يأخذ العدد الصحيح البسيط الذي يمثل نصف قطر الدائرة بالأمتار. الحد الأقصى المسموح به للنطاق الجغرافي هو 50000 متر. لاحظ أنه عند ضبط rankBy على DISTANCE، يجب تحديد موقع جغرافي، ولكن لا يمكنك تحديد نطاق جغرافي أو حدود.
يجب مطابقة keyword مع جميع الحقول المتاحة، بما في ذلك على سبيل المثال لا الحصر، الاسم والنوع والعنوان، بالإضافة إلى مراجعات العملاء ومحتوى الأطراف الثالثة الأخرى، أو type الذي يقصر النتائج على الأماكن التي تطابق النوع المحدّد. يمكن تحديد نوع واحد فقط (في حال تقديم أكثر من نوع واحد، ثم يتم تجاهل جميع الأنواع التي تتبع الإدخال الأول). راجِع قائمة الأنواع المتوافقة.

في هذا الدرس التطبيقي حول الترميز، ستستخدِم موضع المستخدم الحالي كموقع جغرافي لنتائج البحث وترتيب النتائج حسب المسافة.

يمكنك إضافة ما يلي في التعليق TODO: Step 3B1 لكتابة وظيفتين لطلب البحث والتعامل مع الرد.

تُستخدَم الكلمة الرئيسية sushi كعبارة بحث، ولكن يمكنك تغييرها. يتم تقديم رمز تعريف دالة createMarkers في القسم التالي.

step3/index.html

/* TODO: Step 3B1, Call the Places Nearby Search */
// Perform a Places Nearby Search Request
function getNearbyPlaces(position) {
    let request = {
    location: position,
    rankBy: google.maps.places.RankBy.DISTANCE,
    keyword: 'sushi'
    };

    service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, nearbyCallback);
}

// Handle the results (up to 20) of the Nearby Search
function nearbyCallback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarkers(results);
    }
}

/* TODO: Step 3C, Generate markers for search results */

أضف هذا السطر إلى نهاية دالة initMap في التعليق TODO: Step 3B2.

/* TODO: Step 3B2, Call the Places Nearby Search */
// Call Places Nearby Search on user's location
getNearbyPlaces(pos);

أضف هذا السطر إلى نهاية دالة handleLocationError في التعليق TODO: Step 3B3.

/* TODO: Step 3B3, Call the Places Nearby Search */
// Call Places Nearby Search on the default location
getNearbyPlaces(pos);

ج- إنشاء علامات لنتائج البحث

محدِّد موقع يحدّد موقعًا على الخريطة. تستخدم العلامة تلقائيًا صورة عادية. للحصول على معلومات عن تخصيص صور العلامات، اطّلِع على العلامات.

تستخدِم المُنشئ "google.maps.Marker" حرف Marker options واحدًا مع تحديد الخصائص الأولية للعلامة.

الحقول التالية مهمة بشكل خاص ويتم إعدادها بشكل شائع عند إنشاء علامة:

تحدِّد القيمة position (مطلوبة) علامة LatLng تحدِّد الموقع الجغرافي الأوليّ للعلامة.
map (اختيارية) تحدد الخريطة التي سيتم وضع العلامة عليها. إذا لم تحدد الخريطة عند إنشاء العلامة، يتم إنشاء العلامة، ولكن لا يتم إرفاقها (أو عرضها على) الخريطة. يمكنك إضافة العلامة في وقت لاحق عن طريق استدعاء طريقة setMap() في العلامة.
أضف الرمز التالي بعد التعليق TODO: Step 3C لضبط الموضع والخريطة والعنوان لعلامة واحدة لكل مكان في الرد. ويمكنك أيضًا استخدام طريقة extend للمتغيّر bounds لضمان ظهور المركز وجميع العلامات على الخريطة.

step3/index.html

/* TODO: Step 3C, Generate markers for search results */
// Set markers at the location of each place result
function createMarkers(places) {
    places.forEach(place => {
    let marker = new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name
    });

    /* TODO: Step 4B: Add click listeners to the markers */

    // Adjust the map bounds to include the location of this marker
    bounds.extend(place.geometry.location);
    });
    /* Once all the markers have been placed, adjust the bounds of the map to
    * show all the markers within the visible area. */
    map.fitBounds(bounds);
}

/* TODO: Step 4C: Show place details in an info window */

اختباره

احفظ الصفحة وأعِد تحميلها، ثم انقر على السماح لمنح أذونات تحديد الموقع الجغرافي.

من المفترض أن ترى ما يصل إلى 20 علامة حمراء حول الموقع الأوسط للخريطة.

أعِد تحميل الصفحة مرة أخرى واحظر أذونات تحديد الموقع الجغرافي هذه المرة.

هل لا تزال تظهر لك النتائج في المركز التلقائي لخريطتك (في النموذج، الإعداد التلقائي في سيدني، أستراليا)؟

الرمز الكامل للرمز

الرمز الكامل لهذا المشروع حتى وقتنا الحالي متاح على GitHub.

5. عرض تفاصيل المكان عند الطلب

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

تحتاج إلى مكان لعرض تفاصيل المكان، لذا إليك بعض الرموز البسيطة التي تتيح لك استخدام شريط جانبي لعرض تفاصيل المكان عندما ينقر المستخدم على محدِّد الموقع.

أضِف الرمز التالي إلى العلامة style بعد التعليق TODO: Step 4A1:

step4/index.html

/* TODO: Step 4A1: Make a generic sidebar */
/* Styling for an info pane that slides out from the left. 
    * Hidden by default. */
#panel {
    height: 100%;
    width: null;
    background-color: white;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    transition: all .2s ease-out;
}

.open {
    width: 250px;
}

/* Styling for place details */
.hero {
    width: 100%;
    height: auto;
    max-height: 166px;
    display: block;
}

.place,
p {
    font-family: 'open sans', arial, sans-serif;
    padding-left: 18px;
    padding-right: 18px;
}

.details {
    color: darkslategrey;
}

a {
    text-decoration: none;
    color: cadetblue;
}

في القسم body قبل map div مباشرةً، أضف div للوحة التفاصيل.

<!-- TODO: Step 4A2: Add a generic sidebar -->
<!-- The slide-out panel for showing place details -->
<div id="panel"></div>

في الدالة initMap() بعد التعليق TODO: Step 4A3، عليك إعداد المتغيّر infoPane على النحو التالي:

/* TODO: Step 4A3: Add a generic sidebar */
infoPane = document.getElementById('panel');

ب- إضافة أدوات معالجة النقرات إلى العلامات

في الدالة createMarkers، أضِف أداة معالجة نقرة إلى كل علامة أثناء إنشائها.

يجلب المستمع النقر تفاصيل حول المكان المرتبط بتلك العلامة ويستدعي الدالة لعرض التفاصيل.

ألصِق الرمز التالي داخل دالة createMarkers في تعليق الرمز TODO: Step 4B.

يتم تنفيذ الطريقة showDetails في القسم التالي.

step4/index.html

/* TODO: Step 4B: Add click listeners to the markers */
// Add click listener to each marker
google.maps.event.addListener(marker, 'click', () => {
    let request = {
    placeId: place.place_id,
    fields: ['name', 'formatted_address', 'geometry', 'rating',
        'website', 'photos']
    };

    /* Only fetch the details of a place when the user clicks on a marker.
    * If we fetch the details for all place results as soon as we get
    * the search response, we will hit API rate limits. */
    service.getDetails(request, (placeResult, status) => {
    showDetails(placeResult, marker, status)
    });
});

في الطلب addListener، تحدّد السمة placeId مكانًا واحدًا لطلب التفاصيل، وتكون السمة fields هي مصفوفة من أسماء الحقول التي تريد عرضها حول المكان. للحصول على قائمة كاملة بالحقول التي يمكنك طلبها، اطّلِع على واجهة PlaceResult.

ج- عرض تفاصيل المكان في نافذة معلومات

تعرض نافذة المعلومات المحتوى (عادةً النص أو الصور) في مربّع حوار أعلى موقع جغرافي معيَّن على الخريطة. وتضمّ نافذة المعلومات منطقة للمحتوى وساقًا رفيعًا. يتم إرفاق طرف الساق في موقع محدّد على الخريطة. عادةً ما يتم إرفاق نوافذ المعلومات بعلامات، ولكن يمكنك أيضًا إرفاق نافذة معلومات بخط عرض/خط طول محدد.

أضِف الرمز التالي في التعليق TODO: Step 4C لإنشاء InfoWindow يعرض اسم النشاط التجاري وتقييمه، وإرفاق هذه النافذة بالعلامة.

يمكنك تحديد showPanel في القسم التالي لعرض التفاصيل في الشريط الجانبي.

step4/index.html

/* TODO: Step 4C: Show place details in an info window */
// Builds an InfoWindow to display details above the marker
function showDetails(placeResult, marker, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
    let placeInfowindow = new google.maps.InfoWindow();
    placeInfowindow.setContent('<div><strong>' + placeResult.name +
        '</strong><br>' + 'Rating: ' + placeResult.rating + '</div>');
    placeInfowindow.open(marker.map, marker);
    currentInfoWindow.close();
    currentInfoWindow = placeInfowindow;
    showPanel(placeResult);
    } else {
    console.log('showDetails failed: ' + status);
    }
}

/* TODO: Step 4D: Load place details in a sidebar */

استخدِم التفاصيل نفسها المعروضة في الكائن PlaceResult لتعبئة قسم div آخر. في هذا النموذج، استخدِم infoPane، وهو اسم متغيّر عشوائي لـ div مع رقم التعريف &;panel". وفي كل مرة ينقر فيها المستخدم على علامة جديدة، يغلق هذا الرمز الشريط الجانبي إذا كان مفتوحًا من قبل، أو يمحو التفاصيل القديمة، ويضيف التفاصيل الجديدة، ويفتح الشريط الجانبي.

إضافة الرمز التالي بعد التعليق TODO: Step 4D.

step4/index.html

/* TODO: Step 4D: Load place details in a sidebar */
// Displays place details in a sidebar
function showPanel(placeResult) {
    // If infoPane is already open, close it
    if (infoPane.classList.contains("open")) {
    infoPane.classList.remove("open");
    }

    // Clear the previous details
    while (infoPane.lastChild) {
    infoPane.removeChild(infoPane.lastChild);
    }

    /* TODO: Step 4E: Display a Place Photo with the Place Details */

    // Add place details with text formatting
    let name = document.createElement('h1');
    name.classList.add('place');
    name.textContent = placeResult.name;
    infoPane.appendChild(name);
    if (placeResult.rating != null) {
    let rating = document.createElement('p');
    rating.classList.add('details');
    rating.textContent = `Rating: ${placeResult.rating} \u272e`;
    infoPane.appendChild(rating);
    }
    let address = document.createElement('p');
    address.classList.add('details');
    address.textContent = placeResult.formatted_address;
    infoPane.appendChild(address);
    if (placeResult.website) {
    let websitePara = document.createElement('p');
    let websiteLink = document.createElement('a');
    let websiteUrl = document.createTextNode(placeResult.website);
    websiteLink.appendChild(websiteUrl);
    websiteLink.title = placeResult.website;
    websiteLink.href = placeResult.website;
    websitePara.appendChild(websiteLink);
    infoPane.appendChild(websitePara);
    }

    // Open the infoPane
    infoPane.classList.add("open");
}

E. عرض صورة مكان تحتوي على تفاصيل المكان

تعرض النتيجة getDetails مصفوفة تصل إلى 10 صور مرتبطة بـ placeId. يمكنك هنا عرض الصورة الأولى فوق اسم المكان في الشريط الجانبي.

ضع هذا الرمز قبل إنشاء العنصر name إذا كنت تريد أن تظهر الصورة أعلى الشريط الجانبي.

step4/index.html

/* TODO: Step 4E: Display a Place Photo with the Place Details */
// Add the primary photo, if there is one
if (placeResult.photos != null) {
    let firstPhoto = placeResult.photos[0];
    let photo = document.createElement('img');
    photo.classList.add('hero');
    photo.src = firstPhoto.getUrl();
    infoPane.appendChild(photo);
}

اختباره

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

الرمز الكامل للرمز

الرمز الكامل لهذا المشروع حتى وقتنا الحالي متاح على GitHub.

6- تهانينا

تهانينا. لقد استخدمت العديد من ميزات واجهة برمجة تطبيقات JavaScript للخرائط، بما في ذلك مكتبة Places.

المواضيع التي تناولناها

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

مزيد من المعلومات

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

ما هو نوع الدرس التطبيقي الذي تودّ أن نوفّره لك في المرة القادمة؟

مزيد من الأمثلة على استخدام المعلومات المفصّلة عن الأماكن

المزيد من الدروس التطبيقية حول الترميز باستخدام واجهة برمجة تطبيقات JavaScript لمنصة "خرائط Google"

المزيد من الدروس التطبيقية حول الترميز لنظام التشغيل Android

المزيد من الدروس التطبيقية حول الترميز لنظام التشغيل iOS

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

تصميم مخصّص للخرائط

استخدام ميزة "التجوّل الافتراضي"

هل الدرس التطبيقي حول الترميز الذي تريده غير مدرج أعلاه؟ طلب حلول للمشكلة الجديدة هنا

إنشاء خدمة قريبة للبحث عن الأنشطة التجارية باستخدام "منصة خرائط Google" (JavaScript)

1. قبل البدء

المتطلبات الأساسية

بدء استخدام "منصة خرائط Google"

المهام التي ستنفِّذها

المتطلبات اللازمة

الحصول على نموذج الرمز

2. إنشاء خريطة باستخدام مركز تلقائي

1. إنشاء صفحة HTML

2. إضافة خريطة

3- اللصق في مفتاح واجهة برمجة التطبيقات

اختباره

الرمز الكامل للرمز

3- رصد الموقع الجغرافي للمستخدم

ما المقصود بالموقع الجغرافي؟

جرِّب بنفسك

اختباره

الرمز الكامل للرمز

4. البحث عن الأماكن المجاورة

(أ). تحميل مكتبة الأماكن

(ب). يمكنك الاتصال بطلب البحث عن أماكن قريبة والتعامل مع الرد

ج- إنشاء علامات لنتائج البحث

اختباره

الرمز الكامل للرمز

5. عرض تفاصيل المكان عند الطلب

أ- إنشاء شريط جانبي عام

ب- إضافة أدوات معالجة النقرات إلى العلامات

ج- عرض تفاصيل المكان في نافذة معلومات

D. تحميل تفاصيل المكان في شريط جانبي

E. عرض صورة مكان تحتوي على تفاصيل المكان

اختباره

الرمز الكامل للرمز

6- تهانينا

المواضيع التي تناولناها

مزيد من المعلومات

ما هو نوع الدرس التطبيقي الذي تودّ أن نوفّره لك في المرة القادمة؟