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

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

1. قبل البدء

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

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

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

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

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

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

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

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

المتطلبات

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

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

افتح واجهة سطر الأوامر (Terminal على نظام التشغيل MacOS أو "موجه الأوامر" على نظام التشغيل 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. إضافة خريطة

يوضّح لك هذا القسم كيفية تحميل Maps JavaScript API في صفحة الويب وكيفية كتابة رمز 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 في المتصفّح بالإضافة إلى Maps JavaScript API.

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

ما هو تحديد الموقع الجغرافي؟

يشير تحديد الموقع الجغرافي إلى تحديد الموقع الجغرافي للمستخدم أو جهاز الكمبيوتر من خلال مجموعة متنوعة من آليات جمع البيانات. عادةً، تستخدم معظم خدمات تحديد الموقع الجغرافي عناوين توجيه الشبكة أو أجهزة 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">

ب. إجراء طلب البحث عن "أماكن قريبة" والتعامل مع الردّ

بعد ذلك، أنشئ طلب PlaceSearch. في ما يلي الحقول المطلوبة كحدّ أدنى:

في ما يلي الحقول المطلوبة كحدّ أدنى:

‫bounds، الذي يجب أن يكون كائن google.maps.LatLngBounds يحدّد مساحة البحث المستطيلة، أو location وradius، حيث يأخذ الأول كائن google.maps.LatLng، ويأخذ الثاني عددًا صحيحًا بسيطًا يمثّل نصف قطر الدائرة بالأمتار. يبلغ الحد الأقصى لنصف القطر المسموح به 50,000 متر. يُرجى العِلم أنّه عند ضبط 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 قبل علامة div map مباشرةً، أضِف علامة 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");
}

هـ. عرض صورة مكان مع تفاصيل المكان

تعرض النتيجة 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. تهانينا

تهانينا! استخدمت العديد من ميزات Maps JavaScript API، بما في ذلك مكتبة Places.

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

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

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

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

ما هو نوع الدرس العملي الذي تريد أن ننشئه في المرة القادمة؟

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

المزيد من الدروس التطبيقية حول الترميز باستخدام Maps Platform JavaScript API

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

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

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

تخصيص أنماط الخرائط

استخدام StreetView

هل لم يتم إدراج الدرس العملي الذي تريده أعلاه؟ يمكنك طلب ذلك من خلال تقديم مشكلة جديدة هنا.

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

1. قبل البدء

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

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

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

المتطلبات

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

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

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

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

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

تجربة الميزة

نموذج الرمز الكامل

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

ما هو تحديد الموقع الجغرافي؟

جرِّب بنفسك

تجربة الميزة

نموذج الرمز الكامل

4. البحث عن أماكن قريبة

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

ب. إجراء طلب البحث عن "أماكن قريبة" والتعامل مع الردّ

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

تجربة الميزة

نموذج الرمز الكامل

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

(أ). إنشاء شريط جانبي عام

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

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

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

هـ. عرض صورة مكان مع تفاصيل المكان

تجربة الميزة

نموذج الرمز الكامل

6. تهانينا

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

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

ما هو نوع الدرس العملي الذي تريد أن ننشئه في المرة القادمة؟

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