با پلتفرم نقشه های گوگل (جاوا اسکریپت) یک سرویس جستجوی کسب و کار در نزدیکی خود بسازید

60 دقیقه باقیمانده

درباره این codelab

آخرین به‌روزرسانی: دسامبر ۳, ۲۰۲۱

نویسنده: Angela Yu

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

1. قبل از اینکه شروع کنی

یاد بگیرید که از نقشه‌های پلتفرم Google Maps و APIهای مکان‌ها برای ایجاد یک جستجوی کسب‌وکار محلی استفاده کنید، که کاربر را در موقعیت جغرافیایی قرار می‌دهد و مکان‌های جالب اطراف را نشان می‌دهد. این برنامه موقعیت جغرافیایی، جزئیات مکان، عکس‌های مکان و موارد دیگر را ادغام می‌کند.

پیش نیازها

دانش اولیه HTML، CSS و جاوا اسکریپت
پروژه ای با حساب صورتحساب (اگر این را ندارید، دستورالعمل های مرحله بعدی را دنبال کنید).
برای مرحله فعال سازی زیر، باید Maps JavaScript API و Places API را فعال کنید.
یک کلید API برای پروژه بالا.

با پلتفرم Google Maps شروع کنید

اگر قبلاً از Google Maps Platform استفاده نکرده‌اید، راهنمای Get Started with Google Maps Platform را دنبال کنید یا لیست پخش Started with Google Maps Platform را برای تکمیل مراحل زیر تماشا کنید:

یک حساب صورتحساب ایجاد کنید.
یک پروژه ایجاد کنید.
APIها و SDKهای پلتفرم Google Maps را فعال کنید (در قسمت قبل فهرست شده است).
یک کلید API ایجاد کنید.

کاری که خواهی کرد

یک صفحه وب بسازید که نقشه گوگل را نمایش دهد
نقشه را روی مکان کاربر متمرکز کرد
مکان های نزدیک را پیدا کنید و نتایج را به عنوان نشانگرهای قابل کلیک نمایش دهید
واکشی و نمایش جزئیات بیشتر در مورد هر مکان

آنچه شما نیاز دارید

یک مرورگر وب، مانند Google Chrome (توصیه شده)، فایرفاکس، سافاری یا اینترنت اکسپلورر
ویرایشگر متن یا کد مورد علاقه شما

کد نمونه را دریافت کنید

رابط خط فرمان خود را باز کنید (ترمینال در MacOS یا Command Prompt در ویندوز) و کد نمونه را با این دستور دانلود کنید:

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

اگر کار نکرد، روی دکمه زیر کلیک کنید تا تمام کدهای این کد لبه دانلود شود، سپس فایل را از حالت فشرده خارج کنید:

کد را دانلود کنید

به دایرکتوری که به تازگی شبیه سازی یا دانلود کرده اید تغییر دهید.

cd google-maps-nearby-search-js

پوشه های stepN شامل حالت پایان مطلوب هر مرحله از این کد لبه هستند. آنها برای مرجع وجود دارد. تمام کارهای کدنویسی خود را در دایرکتوری به نام work دهید.

2. یک نقشه با مرکز پیش فرض ایجاد کنید

سه مرحله برای ایجاد نقشه گوگل در صفحه وب شما وجود دارد:

یک صفحه HTML ایجاد کنید
یک نقشه اضافه کنید
در کلید API خود جایگذاری کنید

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 را در صفحه وب خود بارگیری کنید و جاوا اسکریپت خود را بنویسید که از API برای افزودن نقشه به صفحه وب استفاده می کند.

این کد اسکریپت را در جایی که  بعد از map div و قبل از تگ بستن </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. در کلید API خود جایگذاری کنید

در خط بعد از  کنید، مقدار پارامتر کلید را در URL منبع اسکریپت با کلید API که در طول پیش نیازها ایجاد کرده اید، کپی کرده و جایگزین کنید.

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> نهایی با کلید API خود جایگزین کرده اید. اگر قبلاً کلید API را ندارید، نحوه دریافت کلید API را در بالا ببینید.

کد نمونه کامل

کد کامل این پروژه تا این لحظه در Github موجود است.

3. کاربر خود را در موقعیت جغرافیایی قرار دهید

سپس، می‌خواهید موقعیت جغرافیایی کاربر یا دستگاه را با استفاده از ویژگی HTML5 Geolocation مرورگر خود به همراه Maps JavaScript API روی نقشه گوگل نمایش دهید.

در اینجا نمونه ای از نقشه ای است که موقعیت جغرافیایی شما را در صورتی که از Mountain View، کالیفرنیا مرور می کنید، نشان می دهد:

موقعیت جغرافیایی چیست؟

مکان جغرافیایی به شناسایی موقعیت جغرافیایی یک کاربر یا دستگاه محاسباتی از طریق مکانیسم های مختلف جمع آوری داده ها اشاره دارد. به طور معمول، اکثر سرویس های موقعیت جغرافیایی از آدرس های مسیریابی شبکه یا دستگاه های GPS داخلی برای تعیین این مکان استفاده می کنند. این برنامه از ویژگی navigator.geolocation استاندارد W3C Geolocation مرورگر وب برای تعیین مکان کاربر استفاده می کند.

خودت آن را امتحان کن

کد بین نظرات 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 */

امتحانش کن

فایل خود را ذخیره کنید
صفحه خود را دوباره بارگیری کنید

اکنون مرورگر شما باید از شما اجازه بخواهد تا موقعیت مکانی خود را با برنامه به اشتراک بگذارد.

یک بار روی Block کلیک کنید تا ببینید آیا خطا را به خوبی مدیریت می کند و در مرکز سیدنی باقی می ماند.
دوباره بارگیری کنید و روی Allow کلیک کنید تا ببینید آیا موقعیت جغرافیایی کار می کند و نقشه را به مکان فعلی شما منتقل می کند یا خیر.

توجه: مرورگر شما ممکن است آخرین تنظیمات مجوزهایی را که به این صفحه داده اید ذخیره کند. برای انتخاب مجوز دیگری (اجازه زمانی که قبلا مسدود کرده اید یا مسدود کردن زمانی که قبلاً اجازه داده بودید)، ممکن است لازم باشد تنظیمات مرورگر خود را پاک کنید.

در کروم، روی این صفحه مکان شما را ردیابی می کند کلیک کنید در نوار آدرس

با این کار پنجره ای ظاهر می شود که تنظیمات فعلی شما را توصیف می کند و به شما امکان می دهد آن تنظیمات را برای بازدیدهای بعدی پاک کنید.

هر زمان که می‌خواهید کنترل بلوک‌های مختلف را آزمایش کنید و مجوزهای موقعیت جغرافیایی را مجاز کنید، برای بازدیدهای بعدی روی پاک کردن این تنظیمات کلیک کنید.

کد نمونه کامل

کد کامل این پروژه تا این لحظه در Github موجود است.

4. مکان های نزدیک را جستجو کنید

جستجوی نزدیک به شما امکان می‌دهد مکان‌های موجود در یک منطقه مشخص را بر اساس کلمه کلیدی یا نوع جستجو کنید. جستجوی Nearby همیشه باید دارای مکانی باشد که می‌تواند به یکی از دو روش مشخص شود:

یک شی LatLngBounds که یک منطقه جستجوی مستطیلی را تعریف می کند
یک ناحیه دایره ای که به عنوان ترکیبی از ویژگی location تعریف می شود - که مرکز دایره را به عنوان یک جسم LatLng مشخص می کند - و یک شعاع اندازه گیری شده در متر

یک جستجوی نزدیک را با فراخوانی متد PlacesService nearbySearch() کنید، که آرایه ای از اشیاء PlaceResult را برمی گرداند.

A. کتابخانه مکان ها را بارگیری کنید

ابتدا، برای دسترسی به خدمات Places Library، 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 می گیرد و دومی یک عدد صحیح ساده را می گیرد که شعاع دایره را بر حسب متر نشان می دهد. حداکثر شعاع مجاز 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 */

امتحانش کن

صفحه را ذخیره و بارگیری مجدد کنید و برای دادن مجوزهای موقعیت جغرافیایی روی Allow کلیک کنید.

شما باید تا 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");
}

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. تبریک می گویم

تبریک می گویم! شما از بسیاری از ویژگی‌های Maps JavaScript API از جمله کتابخانه Places استفاده کردید.

آنچه را پوشش داده ایم

ایجاد نقشه با کلاس google.maps.Map
استفاده از مرورگر کاربر برای موقعیت جغرافیایی و نمایش نتایج بر روی نقشه
اضافه کردن نشانگرها به نقشه شما و پاسخ به رویدادهای کلیک کاربر روی آنها
افزودن پنجره‌های اطلاعات برای نمایش اطلاعات بیشتر وقتی کاربر روی نشانگر کلیک می‌کند
بارگیری کتابخانه مکان‌ها و انجام جستجوی نزدیک
واکشی و نمایش جزئیات مکان و عکس های مکان

بیشتر بدانید

برای انجام کارهای بیشتر با نقشه‌ها، اسناد Maps JavaScript API و Places Library را کاوش کنید، که هر دو شامل راهنماها، آموزش‌ها، مرجع API، نمونه‌های کد بیشتر و کانال‌های پشتیبانی هستند. برخی از ویژگی های محبوب عبارتند از : وارد کردن داده ها به نقشه ها ، شروع به طراحی نقشه خود ، و افزودن سرویس نمای خیابان .

بیشتر دوست دارید کدام نوع از کد لبه را بسازیم؟

نمونه‌های بیشتری از استفاده از اطلاعات مکان‌های غنی کدهای بیشتر با استفاده از Maps Platform JavaScript API کدهای بیشتر برای اندروید کدهای بیشتر برای iOS تجسم داده های مبتنی بر مکان بر روی نقشه ها طراحی سفارشی نقشه ها استفاده از StreetView

آیا کد لبه مورد نظر شما در بالا فهرست نشده است؟ آن را با یک شماره جدید در اینجا درخواست کنید .

گزارش اشتباه

با پلتفرم نقشه های گوگل (جاوا اسکریپت) یک سرویس جستجوی کسب و کار در نزدیکی خود بسازید

درباره این codelab

پیش نیازها

با پلتفرم Google Maps شروع کنید

کاری که خواهی کرد

آنچه شما نیاز دارید

کد نمونه را دریافت کنید

1. یک صفحه HTML ایجاد کنید

2. یک نقشه اضافه کنید

3. در کلید API خود جایگذاری کنید

امتحانش کن

کد نمونه کامل

موقعیت جغرافیایی چیست؟

خودت آن را امتحان کن

امتحانش کن

کد نمونه کامل

A. کتابخانه مکان ها را بارگیری کنید

ب. با درخواست جستجوی مکان‌های نزدیک تماس بگیرید و پاسخ را مدیریت کنید

ج. نشانگرهایی را برای نتایج جستجو ایجاد کنید

امتحانش کن

کد نمونه کامل

الف. یک نوار کناری عمومی بسازید

ب. شنوندگان کلیک را به نشانگرها اضافه کنید

ج. نمایش جزئیات مکان در یک پنجره اطلاعات

D. جزئیات مکان را در نوار کناری بارگیری کنید

E. یک عکس مکان را با جزئیات مکان نمایش دهید

امتحانش کن

کد نمونه کامل

آنچه را پوشش داده ایم

بیشتر بدانید

بیشتر دوست دارید کدام نوع از کد لبه را بسازیم؟