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

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

1. ข้อควรทราบก่อนที่จะเริ่มต้น

เรียนรู้วิธีใช้ Maps Maps และ 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/

หากไม่ได้ผล ให้คลิกปุ่มต่อไปนี้เพื่อดาวน์โหลดโค้ดทั้งหมดสําหรับ Codelab นี้ จากนั้นจึงแยกไฟล์:

ดาวน์โหลดโค้ด

เปลี่ยนให้เป็นไดเรกทอรีที่คุณเพิ่งโคลนหรือดาวน์โหลดไว้

cd google-maps-nearby-search-js

โฟลเดอร์ stepN มีสถานะสิ้นสุดที่ต้องการในแต่ละขั้นตอนของ Codelab นี้ เพื่อการอ้างอิง การเขียนโค้ดทั้งหมดจะทํางานในไดเรกทอรีชื่อ work หรือไม่

2. สร้างแผนที่โดยมีศูนย์เริ่มต้น

การสร้างแผนที่ Google ในหน้าเว็บมี 3 ขั้นตอนดังนี้

สร้างหน้า HTML
เพิ่มแผนที่
วางคีย์ API

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

ด้านล่างนี้คือแผนที่ที่สร้างขึ้นในขั้นตอนนี้ แผนที่มีจุดศูนย์กลางอยู่ที่โรงอุปรากรซิดนีย์ในซิดนีย์ ออสเตรเลีย หากผู้ใช้ปฏิเสธการรับตําแหน่งของตนเอง แผนที่จะมีค่าเริ่มต้นเป็นตําแหน่งนี้และแสดงผลการค้นหาที่น่าสนใจต่อไป

เปลี่ยนไดเรกทอรีไปยังโฟลเดอร์ work/ แก้ไขไฟล์ Codelab ในส่วนที่เหลือของโฟลเดอร์ 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 เพื่อเพิ่มแผนที่ลงในหน้าเว็บ

เพิ่มโค้ดสคริปต์นี้ที่คุณเห็น  หลังจาก div ของ map และก่อนแท็กปิด </body>

ขั้นตอนที่ 1/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 ที่คุณสร้างในช่วงข้อกําหนดเบื้องต้น

ขั้นตอนที่ 1/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 ของเบราว์เซอร์และ API ของ Maps JavaScript

ต่อไปนี้เป็นตัวอย่างแผนที่ที่แสดงตําแหน่งทางภูมิศาสตร์ของคุณ หากคุณเรียกดูจากเมาน์เทนวิว แคลิฟอร์เนีย

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

ตําแหน่งทางภูมิศาสตร์หมายถึง การระบุตําแหน่งทางภูมิศาสตร์ของผู้ใช้หรืออุปกรณ์คอมพิวเตอร์ผ่านกลไกการรวบรวมข้อมูลที่หลากหลาย โดยทั่วไป บริการระบุตําแหน่งทางภูมิศาสตร์ส่วนใหญ่จะใช้ที่อยู่การกําหนดเส้นทางเครือข่ายหรืออุปกรณ์ GPS ภายในเพื่อระบุตําแหน่งนี้ แอปนี้ใช้พร็อพเพอร์ตี้ navigator.geolocation3 ของตําแหน่งทางภูมิศาสตร์ของ W3C ในเว็บเบราว์เซอร์ในการกําหนดตําแหน่งของผู้ใช้

ลองเลย

แทนที่โค้ดระหว่างความคิดเห็น TODO: Step 2, Geolocate your user และ END TODO: Step 2, Geolocate your user ด้วยรหัสต่อไปนี้

ขั้นตอนที่ 2/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

ก. โหลดไลบรารี Places

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

ขั้นตอนที่ 3/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 ในส่วนถัดไป

ขั้นตอนที่ 3/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 เพื่อให้มั่นใจได้ว่าจุดกึ่งกลางและเครื่องหมายทั้งหมดจะปรากฏบนแผนที่

ขั้นตอนที่ 3/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. แสดงรายละเอียดสถานที่ตามคําขอ

เมื่อมีรหัสสถานที่แล้ว (แสดงเป็นช่องใดช่องหนึ่งในผลการค้นหาใกล้เคียง) คุณจะขอรายละเอียดเพิ่มเติมเกี่ยวกับสถานที่ได้ เช่น ที่อยู่ที่สมบูรณ์ หมายเลขโทรศัพท์ ตลอดจนการให้คะแนนและรีวิวของผู้ใช้ ใน Codelab นี้ คุณจะสร้างแถบด้านข้างเพื่อแสดงรายละเอียดสถานที่อย่างละเอียด และทําให้เครื่องหมายมีการโต้ตอบเพื่อให้ผู้ใช้เลือกสถานที่เพื่อดูรายละเอียดได้

คุณต้องมีสถานที่เพื่อแสดงรายละเอียดสถานที่ ดังนั้น โค้ดง่ายๆ นี้สําหรับแถบด้านข้างจะช่วยให้คุณเลื่อนออกและแสดงรายละเอียดสถานที่ได้เมื่อผู้ใช้คลิกเครื่องหมาย

เพิ่มโค้ดต่อไปนี้ลงในแท็ก style หลังความคิดเห็น TODO: Step 4A1

ขั้นตอนที่ 4/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');

ข. เพิ่ม Listener การคลิกไปยังเครื่องหมาย

ในฟังก์ชัน createMarkers ให้เพิ่ม Listener การคลิกลงในตัวทําเครื่องหมายแต่ละรายการเมื่อคุณสร้าง

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

วางโค้ดต่อไปนี้ในฟังก์ชัน createMarkers ในความคิดเห็นเกี่ยวกับโค้ด TODO: Step 4B

เมธอด showDetails จะอยู่ในส่วนถัดไป

ขั้นตอนที่ 4/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 ในส่วนถัดไปเพื่อแสดงรายละเอียดในแถบด้านข้าง

ขั้นตอนที่ 4/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

ขั้นตอนที่ 4/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 หากต้องการให้รูปภาพปรากฏที่ด้านบนของแถบด้านข้าง

ขั้นตอนที่ 4/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.Maps
การใช้เบราว์เซอร์ของผู้ใช้เพื่อระบุตําแหน่งทางภูมิศาสตร์และแสดงผลการค้นหาบนแผนที่
เพิ่มเครื่องหมายลงในแผนที่และตอบสนองต่อเหตุการณ์การคลิกของผู้ใช้บนแผนที่
การเพิ่มหน้าต่างข้อมูลเพื่อแสดงข้อมูลเพิ่มเติมเมื่อผู้ใช้คลิกเครื่องหมาย
กําลังโหลดไลบรารี Places และการค้นหาใกล้เคียง
การดึงข้อมูลและแสดงรายละเอียดสถานที่และรูปภาพสถานที่

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

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

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

ตัวอย่างเพิ่มเติมของการใช้ข้อมูล Rich Places

Codelab เพิ่มเติมโดยใช้ Maps Platform JavaScript API

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

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

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

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

การใช้ StreetView

Codelab ที่คุณต้องการไม่อยู่ในรายการข้างต้นใช่ไหม ส่งคําขอเกี่ยวกับปัญหาใหม่ที่นี่

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

1. ข้อควรทราบก่อนที่จะเริ่มต้น

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

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

สิ่งที่คุณจะทํา

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

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

2. สร้างแผนที่โดยมีศูนย์เริ่มต้น

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

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

3. วางคีย์ API

ทดสอบ

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

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

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

ลองเลย

ทดสอบ

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

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

ก. โหลดไลบรารี Places

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

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

ทดสอบ

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

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

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

ข. เพิ่ม Listener การคลิกไปยังเครื่องหมาย

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

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

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

ทดสอบ

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

6. ยินดีด้วย

สิ่งที่เราพูดถึง

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

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