หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างบริการค้นหาธุรกิจที่อยู่ใกล้เคียงด้วย Google Maps Platform (JavaScript)

1. ก่อนเริ่มต้น

ดูวิธีใช้ Maps API และ Places API ของ Google Maps Platform เพื่อสร้างการค้นหาธุรกิจในพื้นที่ ซึ่งจะระบุตำแหน่งทางภูมิศาสตร์ของผู้ใช้และแสดงสถานที่ที่น่าสนใจในบริเวณใกล้เคียง แอปนี้ผสานรวมตำแหน่งทางภูมิศาสตร์ รายละเอียดสถานที่ รูปภาพสถานที่ และอื่นๆ

ข้อกำหนดเบื้องต้น

ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
โปรเจ็กต์ที่มีบัญชีสำหรับการเรียกเก็บเงิน (ทำตามวิธีการในขั้นตอนถัดไปหากคุณไม่มี)
สำหรับขั้นตอนการเปิดใช้ด้านล่าง คุณจะต้องเปิดใช้ Maps JavaScript API และ Places API
คีย์ API สำหรับโปรเจ็กต์ด้านบน

เริ่มต้นใช้งาน Google Maps Platform

หากคุณยังไม่เคยใช้ Google Maps Platform มาก่อน ให้ทำตามคู่มือการเริ่มต้นใช้งาน Google Maps Platform หรือดูเพลย์ลิสต์การเริ่มต้นใช้งาน Google Maps Platform เพื่อทำตามขั้นตอนต่อไปนี้

สร้างบัญชีสำหรับการเรียกเก็บเงิน
สร้างโปรเจ็กต์
เปิดใช้ Google Maps Platform API และ SDK (แสดงอยู่ในส่วนก่อนหน้า)
สร้างคีย์ API

สิ่งที่คุณต้องทำ

สร้างหน้าเว็บที่แสดงแผนที่ 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 ในหน้าเว็บมี 3 ขั้นตอนดังนี้

สร้างหน้า 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 ลงในหน้าเว็บและเขียน JavaScript ของคุณเองที่ใช้ 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 หากยังไม่มีได้ที่ด้านบน

โค้ดตัวอย่างฉบับเต็ม

โค้ดทั้งหมดสำหรับโปรเจ็กต์นี้จนถึงตอนนี้มีอยู่ใน Github

3. ระบุตำแหน่งทางภูมิศาสตร์ของผู้ใช้

จากนั้น คุณจะต้องแสดงตำแหน่งทางภูมิศาสตร์ของผู้ใช้หรืออุปกรณ์ในแผนที่ Google โดยใช้ฟีเจอร์ตำแหน่งทางภูมิศาสตร์ HTML5 ของเบราว์เซอร์พร้อมกับ Maps JavaScript API

ตัวอย่างแผนที่ที่แสดงตำแหน่งทางภูมิศาสตร์ของคุณหากคุณเรียกดูจาก Mountain View, California มีดังนี้

ตำแหน่งทางภูมิศาสตร์คืออะไร

ตำแหน่งทางภูมิศาสตร์หมายถึงการระบุตำแหน่งทางภูมิศาสตร์ของผู้ใช้หรืออุปกรณ์คอมพิวเตอร์ผ่านกลไกการเก็บรวบรวมข้อมูลที่หลากหลาย โดยปกติแล้ว บริการระบุตำแหน่งทางภูมิศาสตร์ส่วนใหญ่จะใช้ที่อยู่การกำหนดเส้นทางเครือข่ายหรืออุปกรณ์ GPS ภายในเพื่อระบุตำแหน่งนี้ แอปนี้ใช้พร็อพเพอร์ตี้มาตรฐาน W3C Geolocation ของเว็บเบราว์เซอร์ navigator.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 */

ทดสอบ

บันทึกไฟล์
โหลดหน้าเว็บซ้ำ

ตอนนี้เบราว์เซอร์ควรขอสิทธิ์จากคุณเพื่อแชร์ตำแหน่งกับแอป

คลิกบล็อก 1 ครั้งเพื่อดูว่าแฮนเดิลข้อผิดพลาดได้อย่างราบรื่นและยังคงอยู่ตรงกลางของซิดนีย์หรือไม่
โหลดซ้ำอีกครั้ง แล้วคลิกอนุญาตเพื่อดูว่าตำแหน่งทางภูมิศาสตร์ทำงานและย้ายแผนที่ไปยังตำแหน่งปัจจุบันของคุณหรือไม่

หมายเหตุ: เบราว์เซอร์อาจบันทึกการตั้งค่าสิทธิ์ล่าสุดที่คุณให้แก่หน้านี้ หากต้องการเลือกสิทธิ์อื่น (อนุญาตเมื่อคุณบล็อกไว้ก่อนหน้านี้ หรือบล็อกเมื่อคุณอนุญาตไว้ก่อนหน้านี้) คุณอาจต้องล้างการตั้งค่าเบราว์เซอร์

ใน Chrome ให้คลิกหน้านี้กำลังติดตามตำแหน่งของคุณ ในแถบที่อยู่

ซึ่งจะแสดงหน้าต่างที่อธิบายการตั้งค่าปัจจุบันและช่วยให้คุณล้างการตั้งค่าดังกล่าวสำหรับการเข้าชมในอนาคตได้

คลิกล้างการตั้งค่าเหล่านี้สำหรับการเข้าชมในอนาคตเมื่อใดก็ตามที่ต้องการทดสอบการจัดการสิทธิ์การบล็อกและอนุญาตที่แตกต่างกันของตำแหน่งทางภูมิศาสตร์

โค้ดตัวอย่างฉบับเต็ม

โค้ดทั้งหมดสำหรับโปรเจ็กต์นี้จนถึงตอนนี้มีอยู่ใน Github

4. ค้นหาสถานที่ใกล้เคียง

การค้นหาใกล้เคียงช่วยให้คุณค้นหาสถานที่ภายในพื้นที่ที่ระบุได้โดยใช้คีย์เวิร์ดหรือประเภท การค้นหาใกล้เคียงต้องระบุสถานที่ตั้งเสมอ ซึ่งระบุได้ 2 วิธีดังนี้

LatLngBounds ออบเจ็กต์ที่กำหนดพื้นที่ค้นหาสี่เหลี่ยมผืนผ้า
พื้นที่วงกลมที่กำหนดเป็นชุดค่าผสมของพร็อพเพอร์ตี้ location ซึ่งระบุจุดศูนย์กลางของวงกลมเป็นออบเจ็กต์ LatLng และรัศมีที่วัดเป็นเมตร

เริ่มการค้นหาใกล้เคียงด้วยการเรียกใช้เมธอด PlacesService nearbySearch() ซึ่งจะแสดงผลอาร์เรย์ของออบเจ็กต์ PlaceResult

ก. โหลดคลังสถานที่

ก่อนอื่น ให้อัปเดต URL แหล่งที่มาของสคริปต์เพื่อใช้พารามิเตอร์ libraries และเพิ่ม places เป็นค่าเพื่อเข้าถึงบริการ Places Library

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 ซึ่งจำกัดผลลัพธ์ให้แสดงเฉพาะสถานที่ที่ตรงกับประเภทที่ระบุ ระบุได้เพียงประเภทเดียว (หากระบุมากกว่า 1 ประเภท ระบบจะละเว้นประเภททั้งหมดที่ตามหลังรายการแรก) ดูรายการประเภทที่รองรับ

สำหรับ Codelab นี้ คุณจะใช้ตำแหน่งปัจจุบันของผู้ใช้เป็นตำแหน่งสำหรับการค้นหาและจัดอันดับผลลัพธ์ตามระยะทาง

เพิ่มข้อความต่อไปนี้ในความคิดเห็น TODO: Step 3B1 เพื่อเขียนฟังก์ชัน 2 รายการเพื่อเรียกใช้การค้นหาและจัดการการตอบกลับ

ระบบจะใช้คีย์เวิร์ด 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 เพื่อตั้งค่าตำแหน่ง แผนที่ และชื่อสำหรับเครื่องหมาย 1 รายการต่อสถานที่ที่แสดงในการตอบกลับ นอกจากนี้ คุณยังใช้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 ให้เพิ่ม Listener การคลิกลงในเครื่องหมายแต่ละรายการขณะสร้าง

เครื่องมือฟังการคลิกจะดึงรายละเอียดเกี่ยวกับสถานที่ที่เชื่อมโยงกับเครื่องหมายนั้น และเรียกใช้ฟังก์ชันเพื่อแสดงรายละเอียด

วางโค้ดต่อไปนี้ไว้ในฟังก์ชัน 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 Library

สิ่งที่เราได้พูดถึงไปแล้ว

การสร้างแผนที่ด้วยคลาส google.maps.Map
ใช้เบราว์เซอร์ของผู้ใช้สำหรับการระบุตำแหน่งทางภูมิศาสตร์และแสดงผลลัพธ์บนแผนที่
การเพิ่มเครื่องหมายลงในแผนที่และการตอบสนองต่อเหตุการณ์การคลิกของผู้ใช้ในเครื่องหมายเหล่านั้น
การเพิ่มหน้าต่างข้อมูลเพื่อแสดงข้อมูลเพิ่มเติมเมื่อผู้ใช้คลิกเครื่องหมาย
การโหลดคลังข้อมูลสถานที่และการทำการค้นหาใกล้เคียง
การดึงและแสดงรายละเอียดสถานที่และรูปภาพสถานที่

ดูข้อมูลเพิ่มเติม

หากต้องการทำสิ่งต่างๆ กับแผนที่ให้มากขึ้น โปรดดูเอกสารประกอบของ Maps JavaScript API และเอกสารประกอบของ Places Library ซึ่งทั้ง 2 อย่างนี้มีคำแนะนำ บทแนะนำ ข้อมูลอ้างอิง API ตัวอย่างโค้ดเพิ่มเติม และช่องทางการสนับสนุน ฟีเจอร์ยอดนิยมบางส่วน ได้แก่ การนำเข้าข้อมูลลงใน Maps, เริ่มจัดรูปแบบแผนที่ และการเพิ่มบริการ Street View

คุณอยากให้เราสร้าง Codelab ประเภทใดมากที่สุด

ตัวอย่างเพิ่มเติมของการใช้ข้อมูลสถานที่ที่สมบูรณ์

Codelab เพิ่มเติมที่ใช้ JavaScript API ของ Maps Platform

Codelab เพิ่มเติมสำหรับ Android

Codelab เพิ่มเติมสำหรับ iOS

การแสดงข้อมูลตามตำแหน่งในแผนที่

การจัดรูปแบบแผนที่ที่กำหนดเอง

การใช้ Street View

หากไม่พบ Codelab ที่ต้องการในรายการด้านบน ขอได้โดยแจ้งปัญหาใหม่ที่นี่

1. ก่อนเริ่มต้น

ข้อกำหนดเบื้องต้น

เริ่มต้นใช้งาน Google Maps Platform

สิ่งที่คุณต้องทำ

สิ่งที่ต้องมี

รับโค้ดตัวอย่าง

2. สร้างแผนที่ที่มีจุดกึ่งกลางเริ่มต้น

1. สร้างหน้า HTML

2. เพิ่มแผนที่

3. วางคีย์ API

ทดสอบ

โค้ดตัวอย่างฉบับเต็ม

3. ระบุตำแหน่งทางภูมิศาสตร์ของผู้ใช้

ตำแหน่งทางภูมิศาสตร์คืออะไร

ลองด้วยตัวเอง

ทดสอบ

โค้ดตัวอย่างฉบับเต็ม

4. ค้นหาสถานที่ใกล้เคียง

ก. โหลดคลังสถานที่

ข. เรียกใช้คำขอค้นหาสถานที่ใกล้เคียงและจัดการการตอบกลับ

ค. สร้างเครื่องหมายสำหรับผลการค้นหา

ทดสอบ

โค้ดตัวอย่างฉบับเต็ม

5. แสดงรายละเอียดสถานที่ตามต้องการ

ก. สร้างแถบด้านข้างทั่วไป

ข. เพิ่มเครื่องรับฟังการคลิกลงในเครื่องหมาย

ค. แสดงรายละเอียดสถานที่ในหน้าต่างข้อมูล

ง. โหลดรายละเอียดสถานที่ในแถบด้านข้าง

E. แสดงรูปภาพสถานที่พร้อมรายละเอียดสถานที่

ทดสอบ

โค้ดตัวอย่างฉบับเต็ม

6. ขอแสดงความยินดี

สิ่งที่เราได้พูดถึงไปแล้ว

ดูข้อมูลเพิ่มเติม

คุณอยากให้เราสร้าง Codelab ประเภทใดมากที่สุด