เกี่ยวกับ Codelab นี้
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 เพื่อเพิ่มแผนที่ลงในหน้าเว็บ
- เพิ่มโค้ดสคริปต์นี้ที่คุณเห็น
<!-- TODO: Step 1B, Add a map -->หลังจาก 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
- ในบรรทัดหลังจาก
<!-- TODO: Step 1C, Get an API key -->ให้คัดลอกและแทนที่ค่าของพารามิเตอร์คีย์ใน 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 ครั้งเพื่อดูว่าจัดการข้อผิดพลาดได้อย่างสวยงามและอยู่กึ่งกลางในซิดนีย์หรือไม่
- โหลดซ้ําอีกครั้ง แล้วคลิกอนุญาตเพื่อดูว่าตําแหน่งทางภูมิศาสตร์ใช้งานได้หรือไม่ แล้วย้ายแผนที่ไปยังตําแหน่งปัจจุบันของคุณ
โค้ดตัวอย่างแบบเต็ม
โค้ดแบบเต็มสําหรับโปรเจ็กต์นี้จนถึงตอนนี้พร้อมให้บริการใน 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 ประเภทใดมากที่สุด
Codelab ที่คุณต้องการไม่อยู่ในรายการข้างต้นใช่ไหม ส่งคําขอเกี่ยวกับปัญหาใหม่ที่นี่