ภาพรวม
Google Maps Platform มีให้บริการบนเว็บ (JS, TS), Android และ iOS และยังมี API ของบริการเว็บสำหรับการรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทางอีกด้วย ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มหนึ่ง แต่จะมีลิงก์เอกสารประกอบสำหรับการใช้งานบนแพลตฟอร์มอื่นๆ
เครื่องมือสร้างด่วนใน Google Cloud Console ช่วยให้คุณสร้างเครื่องระบุตำแหน่งได้อย่างรวดเร็ว รวมถึงการนำเข้าข้อมูล Business Profile และการฝังลิงก์การจองการนัดหมายจากผู้ให้บริการบุคคลที่สามโดยอัตโนมัติ UI แบบอินเทอร์แอกทีฟช่วยให้คุณสร้างโค้ดและทำให้ใช้งานได้กับระบบคลาวด์ได้ในเวลาไม่กี่นาที
ผู้ใช้ของคุณต้องการหาข้อมูลผลิตภัณฑ์และบริการทางออนไลน์ รวมถึงค้นหาสถานที่ที่ดีที่สุดและสะดวกที่สุดในการเข้าชม นัดหมาย หรือรับสินค้าที่สั่งซื้อ ลูกค้าต้องการเดินทางไปถึงสถานที่ตั้งของคุณโดยเร็วที่สุด และคุณต้องการมอบประสบการณ์ออนไลน์ที่สมบูรณ์ให้แก่ผู้ใช้ ซึ่งเพิ่มการเข้าชมสถานที่ตั้งจริงของคุณ เพิ่มความพึงพอใจของผู้ใช้ และลดการโทรขอรับการสนับสนุนลง นอกจากนี้ ยังต้องวัดความสำเร็จของตัวระบุตำแหน่งเพื่อดูว่าลูกค้าค้นพบตำแหน่งของคุณได้ไหม และต้องการทราบว่าต้องปรับปรุงที่ใดบ้าง
Locator Plus ซึ่งเป็นคำแนะนำและเคล็ดลับในการปรับแต่งที่เรามอบให้ในหัวข้อนี้ คือส่วนผสมที่ลงตัวของ Google Maps Platform API ในการสร้างประสบการณ์การใช้งานตัวระบุตำแหน่งที่ยอดเยี่ยมสำหรับผู้ใช้ เมื่อทำตามแนวทางปฏิบัติเหล่านี้ คุณจะช่วยให้ผู้ใช้ค้นพบสถานที่ตั้งของคุณบนแผนที่ ดูข้อมูลอย่างละเอียดที่จำเป็นต่อการตัดสินใจ และนำทางแก่ผู้ใช้ได้ ไม่ว่าพวกเขาจะกำลังขับรถ ปั่นจักรยาน เดิน หรือใช้บริการขนส่งสาธารณะ
สําหรับผู้ใช้ Locator Plus แดชบอร์ดข้อมูลวิเคราะห์จะช่วยวิเคราะห์และสร้างข้อมูลเชิงลึกจากข้อมูลของคุณ ทำให้คุณเห็นภาพที่ชัดเจนว่าผู้เลือกซื้อมีส่วนร่วมกับเครื่องระบุตำแหน่งร้านได้ดีเพียงใด หากต้องการเข้าถึงรายงานนี้ ให้ไปที่ส่วนรายงานการมีส่วนร่วมของคอนโซล ดูรายละเอียดเพิ่มเติมเกี่ยวกับรายงานนี้ได้ที่รายงานการมีส่วนร่วม
แผนภาพต่อไปนี้แสดง API หลักที่เกี่ยวข้องในการใช้งาน Locator Plus แผนภาพนี้ยังแสดงฐานข้อมูลตำแหน่งของคุณเอง ซึ่งคุณสามารถนำไปรวมกับรายละเอียดสถานที่เพื่อให้ผู้ใช้ได้ชุดข้อมูลที่ดีที่สุดและสมบูรณ์มากที่สุด (คลิกเพื่อขยาย)
กำลังเปิดใช้ API
หากต้องการใช้แนวทางปฏิบัติเหล่านี้ คุณต้องเปิดใช้ API ต่อไปนี้ใน Google Cloud Console ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่การเริ่มต้นใช้งาน Google Maps Platformส่วนการใช้งาน
ต่อไปนี้เป็นแนวทางปฏิบัติและการปรับแต่งที่เราจะกล่าวถึงในหัวข้อนี้
- แนวทางปฏิบัติหลักคือไอคอนเครื่องหมายถูก
- ไอคอนดาวเป็นการปรับแต่งที่ไม่บังคับแต่แนะนำให้ปรับแต่งเพื่อเพิ่มประสิทธิภาพโซลูชัน
| การแสดงสถานที่ตั้งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ |
สร้างแผนที่ที่ช่วยให้ผู้ใช้ดูรายละเอียดของตำแหน่ง เคลื่อนที่ไปรอบๆ รวมทั้งซูมเข้าและออก หรือสำรวจ โซลูชัน Quick Builder Locator Plus เพื่อสร้างแผนที่อย่างรวดเร็ว รวมถึงการนำเข้ารายละเอียดธุรกิจอย่างง่ายดายจากข้อมูล Business Profile การฝังลิงก์การจองการนัดหมาย และการทำให้ใช้งานได้ใน Google Cloud Storage |
|
| การให้รายละเอียดสถานที่ | เมื่อผู้ใช้พบสถานที่ตั้งที่อยู่ใกล้ที่สุดบนแผนที่แล้ว ให้ให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับรายละเอียดสถานที่เกี่ยวกับสถานที่เหล่านั้นเพื่อช่วยให้ผู้ใช้ตัดสินใจ | |
| การแสดงสถานที่จากมุมมอง 45° | ทำให้ผู้ใช้เห็นภาพตำแหน่งของคุณในมุมมองจากดาวเทียมได้ดีขึ้นจากมุม 45 องศา | |
| การระบุสถานที่ตั้งของผู้ใช้ | เพิ่มฟังก์ชัน "พิมพ์ขณะใช้งาน" เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์ม และปรับปรุงความถูกต้องของที่อยู่ด้วยการกดแป้นพิมพ์ขั้นต่ำ | |
| การแสดงเวลาในการเดินทางและระยะทางไปยังสถานที่ใกล้เคียง | คำนวณระยะทางและเวลาเดินทางจากต้นทางและจุดหมายหลายแห่ง (ไม่บังคับ) ระบุรูปแบบการขนส่งต่างๆ เช่น การเดิน การขับรถ หรือการปั่นจักรยาน | |
| การช่วยให้ผู้ใช้จองการนัดหมาย |
อนุญาตให้ผู้ใช้จองการนัดหมายจากแผงด้านข้างรายละเอียดสถานที่ หรือสำรวจ โซลูชัน Quick Builder Locator Plus เพื่อสร้างแผนที่อย่างรวดเร็ว รวมถึงการนำเข้ารายละเอียดธุรกิจอย่างง่ายดายจากข้อมูล Business Profile การฝังลิงก์การจองการนัดหมาย และการทำให้ใช้งานได้ใน Google Cloud Storage |
|
| การแสดงข้อเสนอในร้าน | แสดงข้อเสนอพิเศษในท้องถิ่นที่คลิกได้ให้ผู้ใช้เห็นในแผงด้านข้าง "รายละเอียดสถานที่" | |
| การแสดงเส้นทางการนำทาง | รับข้อมูลเส้นทางจากต้นทางถึงปลายทางโดยใช้ขนส่งรูปแบบต่างๆ เช่น เดินเท้า ขับรถ ปั่นจักรยาน และขนส่งมวลชน | |
| การปรับแต่งแผนที่ | สร้างเครื่องหมายบนแผนที่ที่กำหนดเองเพื่อช่วยให้สถานที่โดดเด่น แล้วจัดรูปแบบแผนที่ให้เข้ากับสีของแบรนด์ แสดง (หรือซ่อน) จุดที่น่าสนใจ (POI) ที่เจาะจงบนแผนที่เพื่อช่วยให้ผู้ใช้หาทิศทางของตัวเองได้ดีขึ้น และควบคุมความหนาแน่นของจุดที่น่าสนใจเพื่อป้องกันไม่ให้แผนที่รก | |
| การรับข้อมูลเชิงลึกการใช้งานด้วยข้อมูลวิเคราะห์ | กำหนดค่าและใช้ Google Analytics เพื่อรับข้อมูลเชิงลึกเกี่ยวกับกลยุทธ์และการใช้งานเครื่องระบุตำแหน่งของคุณ | |
| การส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่ | นอกจากการแสดงเส้นทางบนเครื่องระบุตำแหน่งแล้ว คุณยังส่งเส้นทางไปที่โทรศัพท์ของผู้ใช้เพื่อนำทางโดยใช้ Google Maps ทุกที่ทุกเวลาได้ด้วย | |
| การแสดง Street View เพื่อช่วยให้ผู้ใช้เห็นภาพสถานที่ | มอบภาพ Street View ในมุมมอง 360 องศาให้แก่ผู้ใช้เพื่อวางทิศทางได้ดีขึ้น และช่วยให้ผู้ใช้หาตำแหน่งของคุณได้เร็วขึ้น | |
| การระบุสถานที่ตั้งของผู้ใช้ด้วยตำแหน่งทางภูมิศาสตร์ | หากไม่ต้องการใช้บริการตำแหน่งในอุปกรณ์ ให้ใช้ตำแหน่งทางภูมิศาสตร์เพื่อช่วยระบุตำแหน่งของผู้ใช้ | |
| การรวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่ | รวมรายละเอียดสถานที่ตั้งที่คุณกำหนดเองเข้ากับรายละเอียดสถานที่ เพื่อมอบชุดข้อมูลที่สมบูรณ์ให้แก่ผู้ใช้เพื่อการตัดสินใจ |
การแสดงสถานที่ตั้งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ
ตัวระบุตำแหน่งเป็นส่วนสำคัญของประสบการณ์ของผู้ใช้ อย่างไรก็ตาม บางเว็บไซต์อาจไม่มีแผนที่ที่เรียบง่าย ทำให้ผู้ใช้ต้องออกจากเว็บไซต์หรือแอปเพื่อค้นหาสถานที่ใกล้เคียง ซึ่งหมายความว่าผู้ใช้จะได้รับประสบการณ์การใช้งานที่ไม่ดีหากต้องไปยังหน้าต่างๆ เพื่อให้มีข้อมูลที่ต้องการ แต่คุณสามารถเพิ่มประสิทธิภาพประสบการณ์นี้ได้ด้วยการฝังและปรับแต่งแผนที่ในแอปพลิเคชันของคุณ
การเปิดใช้ฟีเจอร์นี้มีหลายวิธี ได้แก่ (1) ใช้ โซลูชัน Quick Builder Locator Plus เพื่อให้บริการฟังก์ชันการทำงานนี้ทันที และ (2) ใช้งาน Maps แบบไดนามิกของคุณเอง ส่วนนี้จะอธิบายตัวเลือกเหล่านี้โดยละเอียด
การใช้ Quick Builder Locator Plus
คุณสามารถใช้ โซลูชัน Quick Builder Locator Plus เพื่อนำเข้ารายละเอียดธุรกิจจาก Business Profile ตอนนี้การเปลี่ยนแปลงรายละเอียดธุรกิจของ Business Profile จะแสดงในเครื่องระบุตำแหน่งร้านบนเว็บไซต์ การเปลี่ยนแปลงเหล่านี้อาจรวมถึงเวลาทำการ ข้อมูลติดต่อ รูปภาพ ตัวเลือกบริการ และอื่นๆ เครื่องมือสร้างอย่างรวดเร็วช่วยให้คุณสำรวจการตั้งค่าที่ตั้งธุรกิจบนแผนที่ สร้างโค้ดที่ทำให้ใช้งานได้ หรือทำให้ใช้งานได้กับ Google Cloud Storage โดยตรงได้อย่างรวดเร็ว
การใช้แผนที่แบบไดนามิกของคุณเอง
| ตัวอย่างนี้ใช้สิ่งต่อไปนี้ Maps JavaScript API | เวอร์ชันที่มีให้บริการ: Android | iOS |
การเพิ่มแผนที่แบบไดนามิกลงในหน้าเว็บของคุณ ซึ่งก็คือแผนที่ที่ผู้ใช้สามารถเลื่อนไปมา ซูมเข้าออก และดูรายละเอียดเกี่ยวกับสถานที่และจุดสนใจต่างๆ ได้โดยใช้โค้ดเพียงไม่กี่บรรทัด
ก่อนอื่น คุณต้องรวม Maps JavaScript API ไว้ในหน้าเว็บ ซึ่งทำผ่านการเชื่อมโยงสคริปต์ต่อไปนี้ในหน้า HTML ของคุณ
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
URL อ้างอิงถึงฟังก์ชัน initMap ของ JavaScript ที่ทํางานเมื่อโหลดหน้าเว็บ ใน URL คุณยังกำหนดภาษาหรือภูมิภาคของแผนที่เพื่อให้แน่ใจว่ามีการจัดรูปแบบอย่างถูกต้องสำหรับประเทศที่คุณกำหนดเป้าหมายได้ด้วย การตั้งค่าภูมิภาคยังช่วยให้มั่นใจได้ว่าลักษณะการทํางานของแอปที่ใช้นอกสหรัฐอเมริกาจะมีอคติต่อภูมิภาคที่คุณตั้งค่าไว้ ดูรายการภาษาและภูมิภาคที่รองรับทั้งหมดและดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานพารามิเตอร์ region ได้ในรายละเอียดการครอบคลุมของแพลตฟอร์ม Google Maps
ขั้นต่อไป คุณต้องใช้ HTML div เพื่อวางแผนที่ของคุณบนหน้าเว็บ
นี่คือที่ซึ่งแผนที่จะปรากฏ
<div id="map"></div>
ขั้นตอนถัดไปคือการตั้งค่าฟังก์ชันการทำงานพื้นฐานของแผนที่ โดยทําในฟังก์ชันของสคริปต์ initMap ที่ระบุใน URL ของสคริปต์ ในสคริปต์นี้ ที่แสดงในตัวอย่างต่อไปนี้ คุณจะตั้งค่าตำแหน่งเริ่มต้น ประเภทแผนที่ และการควบคุมที่จะพร้อมใช้งานในแผนที่สำหรับผู้ใช้ได้ โปรดสังเกตว่า getElementById() อ้างอิงรหัส div "แผนที่" ด้านบน
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}
สำหรับเครื่องระบุตำแหน่ง คุณมักสนใจที่จะตั้งค่าตำแหน่งเริ่มต้น จุดศูนย์กลางหรือขอบเขต และระดับการซูม (แผนที่จะซูมเข้าไปในตำแหน่งนั้นมากน้อยเพียงใด) คุณจะกำหนดระดับการโต้ตอบกับแผนที่หรือไม่ก็ได้สำหรับองค์ประกอบอื่นๆ เช่น การปรับแต่งตัวควบคุม
กำลังรับรหัสสถานที่
| ตัวอย่างนี้ใช้สิ่งต่อไปนี้ Places API | วิธีการใช้งานแบบอื่นๆ เพิ่มเติม: JavaScript |
คุณอาจมีฐานข้อมูลของสถานที่ตั้งที่มีข้อมูลพื้นฐาน เช่น ชื่อสถานที่ ที่อยู่ และหมายเลขโทรศัพท์ หากต้องการดึงข้อมูลที่ Google Maps Platform มีเกี่ยวกับสถานที่นั้น รวมถึงพิกัดทางภูมิศาสตร์และข้อมูลจากผู้ใช้ ให้ค้นหารหัสสถานที่ที่ตรงกับสถานที่ตั้งแต่ละแห่งในฐานข้อมูลของคุณ คุณสามารถเรียกใช้
ค้นหาสถานที่ปลายทางใน Places API การค้นหาสถานที่และส่งคำขอเฉพาะช่อง place_id ได้ ต่อไปนี้คือตัวอย่างของการขอรหัสสถานที่สำหรับสำนักงานของ Google ลอนดอน
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
คุณจัดเก็บรหัสสถานที่นี้ในฐานข้อมูลและใช้เป็นวิธีที่มีประสิทธิภาพในการขอข้อมูลเกี่ยวกับสถานที่ได้ ต่อไปนี้เป็นคำแนะนำในการใช้รหัสสถานที่เพื่อเข้ารหัสพิกัดภูมิศาสตร์ เรียกดูรายละเอียดสถานที่ และขอเส้นทางไปยังสถานที่นั้น
การระบุพิกัดทางภูมิศาสตร์แก่ตำแหน่งของคุณ
| ตัวอย่างนี้ใช้ Geocoding API | วิธีการใช้งานแบบอื่นๆ เพิ่มเติม: JavaScript |
หากฐานข้อมูลของสถานที่ตั้งของคุณมีที่อยู่ แต่ไม่มีพิกัดทางภูมิศาสตร์ ให้ใช้ Geocoding API เพื่อดูละติจูดและลองจิจูดของที่อยู่นั้น เพื่อวัตถุประสงค์ในการวางเครื่องหมายบนแผนที่ คุณจะเข้ารหัสพิกัดภูมิศาสตร์ที่อยู่ฝั่งเซิร์ฟเวอร์ได้ จัดเก็บละติจูดและลองจิจูดในฐานข้อมูล และรีเฟรชอย่างน้อยทุก 30 วัน
ต่อไปนี้คือตัวอย่างการใช้ Geocoding API เพื่อดูละติจูดและลองจิจูดของรหัสสถานที่ที่ส่งคืนสำหรับสำนักงาน Google ลอนดอน
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
การเพิ่มสถานที่ตั้งลงในแผนที่
ขั้นตอนต่อไปคือการเพิ่มสถานที่ตั้งของคุณลงในแผนที่ ซึ่งมักทำได้โดยการเพิ่มเครื่องหมายลงในแผนที่ แม้ว่าจะมีตัวเลือกอื่นๆ จำนวนมากที่คุณใช้ได้ เช่น ชั้นข้อมูล
เมื่อคุณมีละติจูดและลองจิจูดสำหรับตำแหน่งของคุณแล้ว ต่อไปนี้เป็นตัวอย่างของการเพิ่มเครื่องหมายลงในแผนที่
var marker = new google.maps.Marker({
position: { lat: 51.493073, lng: -0.146550 },
label:"A",
title:"Location Name"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
เพียงทำเครื่องหมายไม่กี่เครื่องหมาย คุณจะสามารถดูตำแหน่งของหลายๆ แห่งพร้อมกันได้
หากมีตำแหน่งจำนวนมาก คุณอาจพิจารณาใช้เครื่องมือคลัสเตอร์เครื่องหมายสำหรับ JavaScript, Android หรือ iOS ต่อไปนี้คือตัวอย่างของคลัสเตอร์ของเครื่องหมายในตัวอย่าง GitHub ของเครื่องระบุตำแหน่งร้าน JavaScript
การให้รายละเอียดสถานที่
| ตัวอย่างนี้ใช้: Maps JavaScript API | วิธีที่มี: API | Android | iOS |
คุณสามารถแชร์รายละเอียดสถานที่ที่ผู้ใช้จำเป็นต้องทราบก่อนที่จะไปยังสถานที่ของคุณได้ ด้วยข้อมูลอย่างละเอียด เช่น ข้อมูลติดต่อ เวลาทำการ การให้คะแนนของผู้ใช้ รูปภาพของผู้ใช้ และสถานะปิดทำการชั่วคราว ผู้ใช้ของคุณจะทราบสิ่งที่จะเกิดขึ้นเมื่อเยี่ยมชมสถานที่ของคุณ หลังจากเรียก Places API แล้ว คุณสามารถกรองและแสดงผลการตอบกลับในหน้าต่างข้อมูล แถบด้านข้างบนเว็บ หรือด้วยวิธีอื่นๆ ตามต้องการ
หากต้องการขอรายละเอียดสถานที่ คุณจะต้องใช้รหัสสถานที่ของสถานที่แต่ละแห่ง ดูการดูรหัสสถานที่เพื่อเรียกข้อมูลรหัสสถานที่ของ ตำแหน่งของคุณ
ขยายเพื่อดูวิดีโอเกี่ยวกับการขอรายละเอียดสถานที่
ดูเวลาทำการ
ตรวจสอบการปิดถนน
ควบคุมค่าใช้จ่าย
ตัวอย่างต่อไปนี้ใช้ไลบรารีสถานที่และ Maps JavaScript API เพื่อเรียกรายละเอียดสถานที่และเพิ่มลงใน InfoWindow การนำไปใช้นี้ใช้กลยุทธ์ที่ประหยัดต้นทุนในการ เรียกคำขอรายละเอียดสถานที่เฉพาะเมื่อผู้ใช้ขอรายละเอียดโดยการคลิก เครื่องหมายแทนการดึงรายละเอียดของสถานที่ทั้งหมดมาล่วงหน้าโดยไม่คำนึงถึง ความสนใจของผู้ใช้
const marker = new google.maps.Marker({
map,
position: { lat: 51.493073, lng: -0.14655 },
});
const request = {
placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
fields: ["name", "formatted_address", "rating", "website"],
};
const infowindow = new google.maps.InfoWindow();
const service = new google.maps.places.PlacesService(map);
google.maps.event.addListener(marker, "click", function () {
service.getDetails(request, (place, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK && place) {
infowindow.setContent(
"<div><strong>" +
place.name +
"</strong><br>" +
place.formatted_address +
"<br>" +
"Rating: " +
place.rating +
" stars<br>" +
place.website +
"</div>"
);
infowindow.open(map, this);
}
});
});
แสดงสถานที่ตั้งจากมุมมอง 45°
| ตัวอย่างนี้ใช้: Maps JavaScript API | เวอร์ชันที่มีให้บริการ: Android | iOS |
การให้มุมมองทางอากาศของตำแหน่งของคุณช่วยให้ผู้ใช้เห็นภาพที่ชัดเจนมากขึ้นว่าสถานที่ดังกล่าวเป็นอย่างไร ซึ่งจะช่วยให้ค้นหาได้ง่ายขึ้น เมื่อผู้ใช้เลือกสถานที่แห่งเดียวเพื่อดูรายละเอียดเพิ่มเติม คุณสามารถซูมเข้าไปในตำแหน่งนั้นเพื่อแสดงภาพถ่ายจากดาวเทียมที่พร้อมใช้งานจากมุม 45°
ตัวอย่างโค้ดต่อไปนี้กำหนดให้แผนที่มีระดับการซูมสูง ประเภทแผนที่ที่เข้ากันได้ และมุมเอียงที่จะแสดงภาพ 45° หากมี ดูรายละเอียดเกี่ยวกับความพร้อมให้บริการของภาพ 45° ได้ในเอกสารประกอบ
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}
กำลังรีเซ็ตเป็นมุมมองแผนที่เดิม
ผู้ใช้มักต้องการสลับไปมาระหว่างมุมมองโดยละเอียดของสถานที่ตั้งแห่งเดียวและมุมมองสรุปของสถานที่ใกล้เคียงหลายแห่ง เพิ่ม Listener เพื่อตรวจจับเมื่อผู้ใช้ออกจากมุมมองรายละเอียดในการโต้ตอบบนแผนที่หรือในมุมมองรายการ เพื่อช่วยอำนวยความสะดวกในเรื่องนี้ ตัวอย่างเช่น การฟังเหตุการณ์ zoom_changed ในออบเจ็กต์ map บ่งบอกว่าผู้ใช้ได้ซูมออกจากมุมมองโดยละเอียดด้วยตนเองหรือเรียกใช้ฟังก์ชันอื่นที่มีการอัปเดตระดับการซูม ในตัวอย่างนี้ การซูมออกจะรีเซ็ตแผนที่เป็นแผนที่ประเภทเดิมและการเอียง
let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
const newZoom = map.getZoom()!;
if (newZoom < 19) {
map.setTilt(0);
map.setMapTypeId(originalMapTypeId);
}
});
การระบุสถานที่ตั้งของผู้ใช้
| ตัวอย่างนี้ใช้สิ่งต่อไปนี้ Maps JavaScript API | เวอร์ชันที่มีให้บริการ: Android | iOS |
องค์ประกอบหลักถัดไปในตัวระบุตำแหน่งคือระบุตำแหน่งเริ่มต้นของผู้ใช้ โดยค่าเริ่มต้น คุณสามารถใช้บริการตำแหน่งของอุปกรณ์เคลื่อนที่และตำแหน่งทางภูมิศาสตร์ของเว็บเบราว์เซอร์เพื่อขอสิทธิ์จากผู้ใช้เพื่อตั้งค่าต้นทางเป็นตำแหน่งปัจจุบันของผู้ใช้ อย่างไรก็ตาม ผู้ใช้อาจปฏิเสธสิทธิ์เหล่านั้นหรืออาจต้องการตั้งค่าตำแหน่งอื่นเป็นจุดเริ่มต้น
ผู้ใช้ปัจจุบันคุ้นเคยกับฟังก์ชันการเติมข้อความอัตโนมัติล่วงหน้าใน Google Maps เวอร์ชันสำหรับผู้ใช้ทั่วไป คุณสามารถผสานรวมฟังก์ชันการทำงานนี้เข้ากับแอปพลิเคชันใดก็ได้ที่ใช้ไลบรารี Places ของ Google Maps Platform บนอุปกรณ์เคลื่อนที่และเว็บ เมื่อผู้ใช้พิมพ์ที่อยู่ การเติมข้อความอัตโนมัติจะเติมส่วนที่เหลือผ่านการใช้วิดเจ็ต คุณยังสามารถสร้างฟังก์ชันเติมข้อความอัตโนมัติของคุณเองได้โดยใช้ไลบรารีของ Places โดยตรง
การเพิ่มไลบรารีการเติมข้อความอัตโนมัติลงในไซต์เป็นเรื่องของการเพิ่มพารามิเตอร์การค้นหา 2-3 รายการลงใน URL ของสคริปต์ Maps JavaScript API ในตัวอย่างต่อไปนี้ การเพิ่มเติมคือ libraries=places
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
ถัดไป ให้เพิ่มกล่องข้อความในหน้าเว็บเพื่อให้ผู้ใช้ป้อนข้อมูล
<input id="autocomplete" placeholder="Enter starting
address, city, or zip code" type="text"></input>
ขั้นสุดท้าย คุณต้องเริ่มต้นบริการเติมข้อความอัตโนมัติ และลิงก์บริการกับกล่องข้อความที่มีชื่อ
การจำกัด
การคาดการณ์การเติมข้อความอัตโนมัติในประเภทพิกัดภูมิศาสตร์จะกำหนดค่าช่องป้อนข้อมูลให้ยอมรับที่อยู่ ย่าน ย่าน เมือง และรหัสไปรษณีย์ เพื่อให้ผู้ใช้ป้อนข้อมูลที่เฉพาะเจาะจงในระดับใดก็ได้เพื่ออธิบายต้นทาง อย่าลืมขอช่อง geometry เพื่อให้คำตอบมีละติจูดและลองจิจูดของต้นทางของผู้ใช้ คุณจะใช้พิกัดแผนที่เหล่านี้เพื่อจัดกึ่งกลางแผนที่ใหม่ และระบุความสัมพันธ์ของตำแหน่งของคุณกับต้นทาง
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
componentRestrictions: {'country': ['gb']},
fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", addUserLocation);
}
ในตัวอย่างนี้ เมื่อผู้ใช้เลือกที่อยู่แล้ว ระบบจะเรียกใช้ฟังก์ชัน addUserLocation() ซึ่งจะนำเรขาคณิตของผลลัพธ์ที่ตรงกัน ตำแหน่งของผู้ใช้ จากนั้นย้ายแผนที่ไปยังตำแหน่งนั้นและเพิ่มเครื่องหมาย
function addUserLocation() {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
// Add a marker to the map.
const marker = new google.maps.Marker({
map: map
});
marker.setLabel("C");
marker.setPosition(place.geometry.location);
// Zoom the map to the marker.
map.panTo(place.geometry.location);
map.setZoom(12);
}
จากนั้นคุณจะดูความสัมพันธ์ระหว่างผู้ใช้กับสถานที่ที่เจาะจงได้ ดังที่ปรากฏในรูปภาพต่อไปนี้
ขยายการ์ดนี้เพื่อดูวิดีโอคำแนะนำแบบทีละขั้นเกี่ยวกับการเพิ่มการเติมข้อมูลสถานที่อัตโนมัติลงในแอป
เว็บไซต์
แอป Android
แอป iOS
แสดงเวลาในการเดินทางและระยะทางไปยังสถานที่ใกล้เคียง
| ตัวอย่างนี้ใช้ข้อมูลต่อไปนี้ Distance Matrix API | ตัวเลือกดังกล่าวเพิ่มเติม: บริการ Distance Matrix, Maps JavaScript API |
เมื่อมีสถานที่ตั้งของผู้ใช้แล้ว คุณสามารถเปรียบเทียบกับตำแหน่งของคุณได้ เมื่อใช้บริการ Distance Matrix Service Maps JavaScript API จะช่วยให้ผู้ใช้สามารถเลือกสถานที่ที่สะดวกที่สุดสำหรับตนโดยใช้เวลาในการขับรถหรือระยะทางบนท้องถนน
การแสดงสถานที่ตั้งที่อยู่ใกล้ผู้ใช้หมายความว่าคุณมีการเติมข้อมูลสถานที่ตั้งแล้ว เมื่อใช้ฐานข้อมูลตำแหน่งของคุณเอง สิ่งสำคัญก็คือต้องตรวจสอบว่าข้อมูลอยู่ในรูปแบบที่สามารถใช้ในแผนที่ เช่น GeoJSON ดังที่อธิบายไว้ในหัวข้อชั้นข้อมูล
วิธีมาตรฐานในการจัดระเบียบรายการสถานที่คือ การจัดเรียงตามระยะทาง บ่อยครั้งที่ระยะทางนี้คำนวณได้ง่ายๆ โดยใช้เส้นตรงของผู้ใช้ไปยังตำแหน่ง แต่อาจทำให้เกิดความเข้าใจผิดได้ เส้นตรงอาจข้ามแม่น้ำที่เข้าไม่ถึงหรือตัดผ่านถนนพลุกพล่าน ในช่วงเวลาที่สถานที่อื่นน่าจะสะดวกกว่า ซึ่งเป็นสิ่งสำคัญเมื่อคุณมีสถานที่หลายแห่งที่อยู่ห่างกันไม่เกิน 2-3 กิโลเมตร
Distance Matrix Service ทำงานโดยดูจากรายการต้นทางและปลายทาง และไม่เพียงแค่ส่งคืนระยะทางในการเดินทาง แต่ยังรวมถึงเวลาระหว่างสถานที่เหล่านั้นด้วย ในกรณีของผู้ใช้ ต้นทางจะเป็นตำแหน่งที่ผู้ใช้อยู่หรือจุดเริ่มต้นที่ต้องการ และปลายทางจะเป็นของสถานที่นั้นๆ ต้นทางและปลายทางสามารถระบุเป็นคู่พิกัดหรือเป็นที่อยู่ โดยรายการหลังจะได้รับการจับคู่เมื่อมีการเรียกใช้บริการ คุณใช้เมทริกซ์ระยะทางกับพารามิเตอร์เพิ่มเติมจำนวนหนึ่งเพื่อแสดงผลลัพธ์ตามเวลาการขับขี่ปัจจุบันหรือในอนาคตได้
ตัวอย่างต่อไปนี้เรียกใช้บริการ Distance Matrix Service โดยการระบุต้นทางและตำแหน่งที่ตั้งของผู้ใช้ ตัวอย่างนี้แสดงระยะทางจากศูนย์กลางแผนที่ไปยังสำนักงาน 3 แห่งของ Google ในลอนดอน
ข้อมูลอ้างอิงด่วนในการเข้ารหัส URL: %2C = , (คอมมา), %3A = : (โคลอน) และ %7C = | (ไปป์)
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
นี่คือเวอร์ชันที่คุณสามารถคัดลอกและเรียกใช้ได้
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a
การตอบกลับจริงจากบริการจะเป็นรายการที่อยู่ ระยะทาง และระยะเวลาที่ตรงกัน ซึ่งคล้ายกับที่แสดงในตัวอย่างต่อไปนี้
ขยายเพื่อดูตัวอย่างคำตอบ:
{
"destination_addresses": [
"123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
"1-13 St Giles High St, West End, London WC2H 8AG, UK",
"6 Pancras Square, Kings Cross, London N1C 4AG, UK"
],
"origin_addresses": [
"Unnamed Road, London, UK"
],
"rows": [
{
"elements": [
{
"distance": {
"text": "4.5 km",
"value": 4540
},
"duration": {
"text": "15 mins",
"value": 924
},
"status": "OK"
},
{
"distance": {
"text": "5.0 km",
"value": 5043
},
"duration": {
"text": "17 mins",
"value": 1044
},
"status": "OK"
},
{
"distance": {
"text": "6.9 km",
"value": 6919
},
"duration": {
"text": "23 mins",
"value": 1357
},
"status": "OK"
}
]
}
],
"status": "OK"
}
ภาพต่อไปนี้แสดงต้นทาง (เครื่องหมายสีแดง C) และจุดหมายบนแผนที่
ระยะทางของเส้นตรงและระยะทางของเส้นทางมักจะแตกต่างกันดังที่แสดงในตารางต่อไปนี้
| ตำแหน่ง | ระยะตรง | ถนนที่มีการจราจรหนาแน่น / เวลา |
|---|---|---|
| สถานที่ A | 3.32 กม. | 4.5 กม. / 15 นาที |
| สถานที่ B | 3.20 กม. | 5.0 กม. / 17 นาที |
| สถานที่ C | 4.84 กม. | 6.9 กม. / 23 นาที |
แม้ว่าสถานที่ B จะอยู่ใกล้ที่สุด แต่เส้นทางและเวลาในการไปถึงที่นั่นอาจยาวนานขึ้นเนื่องจากสถานที่ A สามารถเข้าถึงได้ด้วยทางหลวง
เมื่อส่งคำขอนี้แล้ว คุณจะประมวลผลการจับคู่เพื่อเรียงลำดับคำตอบตามระยะเวลาในการขับรถได้ ดูตัวอย่างฟังก์ชันดังกล่าวได้ใน Codelab สำหรับตัวระบุตำแหน่ง
การแสดงเส้นทางการนำทาง
| ตัวอย่างนี้ใช้ข้อมูลต่อไปนี้ บริการเส้นทาง JavaScript API ของ Maps | นอกจากนี้ยังมี: บริการเว็บ Directions API สำหรับใช้ใน Android และ iOS ทั้งจากแอปพลิเคชันโดยตรงหรือจากระยะไกลผ่านพร็อกซีเซิร์ฟเวอร์ |
การแสดงเส้นทางจากภายในเว็บไซต์หรือแอปพลิเคชันแก่ผู้ใช้หมายความว่าผู้ใช้ไม่ต้องออกจากเว็บไซต์ของคุณ ซึ่งหมายความว่าผู้ใช้จะไม่เสียสมาธิไปกับหน้าอื่นๆ หรือเห็นคู่แข่งบนแผนที่ คุณอาจแสดงปริมาณการปล่อยคาร์บอนของโหมดการเดินทางที่เจาะจงและแสดงผลกระทบของการเดินทางแบบเจาะจงก็ได้
นอกจากนี้ บริการเส้นทางยังมีฟังก์ชันที่ช่วยให้คุณประมวลผลผลลัพธ์และแสดงผลลัพธ์บนแผนที่ได้อย่างง่ายดาย
ต่อไปนี้เป็นตัวอย่างการแสดงแผงเส้นทาง ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอย่างได้ที่ การแสดงเส้นทางแบบข้อความ
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์เหล่านี้ของ Maps ได้จากเอกสารประกอบของ Maps JavaScript API หรือดู Codelab แบบทีละขั้นตอนในการสร้างตัวระบุตำแหน่ง
ช่วยผู้ใช้จองการนัดหมาย
เมื่อผู้ใช้ดูรายละเอียดสถานที่ของสถานที่ตั้งในแผงด้านข้าง คุณจะสะดวกในการจองการนัดหมายได้ด้วยการคลิกปุ่มที่แสดงในรูปต่อไปนี้
การเปิดใช้ฟีเจอร์นี้มีหลายวิธี ได้แก่ (1) ใช้ โซลูชัน Quick Builder Locator Plus เพื่อให้บริการฟังก์ชันการทำงานนี้ทันที และ (2) ใช้ Business Profile ส่วนนี้จะอธิบายตัวเลือกเหล่านี้โดยละเอียด
การใช้ Quick Builder Locator Plus
คุณสามารถใช้ โซลูชัน Quick Builder Locator Plus เพื่อนำเข้ารายละเอียดธุรกิจจาก Business Profile ได้อย่างง่ายดาย เมื่อนำเข้าสู่เครื่องมือสร้างด่วนแล้ว คุณจะเปิดใช้ลิงก์การจองการนัดหมายแบบฝัง (หากมี) สำหรับที่ตั้งธุรกิจของคุณผ่าน จองกับ Google แม้จะไม่มี Business Profile ที่เชื่อมโยงกับบัญชี Google คุณก็ยังสามารถใช้เครื่องมือสร้างด่วนเพื่อฝังลิงก์การจองสำหรับธุรกิจที่คุณเปิดใช้กับผู้ให้บริการการจองบุคคลที่สามไว้แล้วผ่าน "จองกับ Google"* ได้
*จองกับ Google พร้อมให้บริการในบางประเทศ/ภูมิภาคที่ธุรกิจทำงานร่วมกับผู้ให้บริการจอง ที่รองรับเท่านั้น หากคุณสนใจใช้บริการ "จองกับ Google" แต่ไม่ได้ร่วมงานกับพาร์ทเนอร์ "จองกับ Google" โปรดขอให้ผู้ให้บริการแจ้งความสนใจโดยกรอก แบบฟอร์มนี้และอ่านเอกสารประกอบเพื่อดูวิธีเริ่มต้นใช้งาน หากยังไม่ได้ทำงานร่วมกับผู้ให้บริการจอง คุณจะเห็นผู้ให้บริการที่มีสิทธิ์ในส่วนการจองภายในตัวจัดการ Business Profile
การใช้ Business Profile เพื่อเปิดใช้การจองการนัดหมาย
เมื่อคุณจัดการตัวตนบนโลกออนไลน์ด้วย Business Profile ที่ตั้งธุรกิจที่คุณสร้างจะเชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform เพื่อเปิดใช้ฟังก์ชันการทำแผนที่แบบผสานรวมเข้ากับข้อมูลธุรกิจ
Business Profile API ให้คุณสร้างการดำเนินการต่างๆ เช่น การจองการนัดหมาย ที่ดึงข้อมูลและแสดงผลในแอปได้ แต่ต้องทำตามขั้นตอนบางอย่างด้วยตนเองเพื่อเปิดใช้การดำเนินการ ตามที่อธิบายไว้ด้านล่าง
เมื่อผู้ใช้ดูรายละเอียดสถานที่ของสถานที่แห่งใดแห่งหนึ่งของคุณในแผงด้านข้าง คุณจะระบุลิงก์ให้ผู้ใช้ทำการนัดหมายได้ ส่วนนี้อธิบายวิธีการ
-
สร้าง Business Profile API
placeActionLinkสำหรับสถานที่ตั้งประเภทAPPOINTMENT,ONLINE_APPOINTMENTหรือDINING_RESERVATIONplaceActionLinkจะเป็นออบเจ็กต์ที่คุณใช้สำหรับลิงก์การนัดหมายในแผงด้านข้าง (หากสร้างลิงก์การดำเนินการนัดหมายที่ต้องการไว้แล้ว ให้ข้ามไปขั้นตอนต่อไป) ตัวอย่างการตอบสนองจากการดำเนินการplaceActionLinks.createPOST ที่ประสบความสำเร็จมีดังนี้{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } -
ค้นหาสถานที่ตั้ง Business Profile ที่เชื่อมโยงกับรหัสสถานที่ใน Google Maps Platform
เมื่อผู้ใช้ดูรายละเอียดสถานที่ ก็จะเห็นรายละเอียดสำหรับรหัสสถานที่ของ Google Maps Platform รหัสสถานที่จะเชื่อมโยงกับรหัสสถานที่ตั้งของ Business Profile คุณจึงต้องหารหัสสถานที่ตั้งตามรหัสสถานที่ในแผนที่เพื่อดึงข้อมูลและแสดงลิงก์การจองการนัดหมายที่สร้างไว้ เรียกใช้ Business Profile API ต่อไปนี้
- แสดงรายการบัญชีของโปรเจ็กต์
- แสดงตำแหน่งทั้งหมดภายในบัญชี
- ในสถานที่ตั้งของบัญชี
LocationKeyมีรหัสสถานที่ของ Google Maps Platform ซึ่งนำไปเปรียบเทียบกับรหัสสถานที่ของสถานที่ที่ดูอยู่ได้
-
คุณจะได้รับลิงก์การดำเนินการที่ต้องการด้วยการใช้รหัสสถานที่ตั้ง หากต้องการเรียกข้อมูลการนัดหมายที่มีอยู่
placeActionLinkให้ระบุplaceActionLinksสำหรับสถานที่ตั้งนั้น แล้วกรองด้วยplaceActionTypeเพื่อหาลิงก์การนัดหมายที่ต้องการใช้ (APPOINTMENT,ONLINE_APPOINTMENTหรือDINING_RESERVATION)ตัวอย่างต่อไปนี้แสดง
placeActionLinkของการนัดหมายในการตอบกลับจากการเรียกใช้ LIST{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] } - สร้างและป้อนข้อมูล
<div>ในแผงด้านข้างด้วยข้อมูลที่เกี่ยวข้องจากออบเจ็กต์placeActionLinkโดยเฉพาะ URI สำหรับลิงก์การจองการนัดหมาย
ทางเลือกอื่นๆ ในการเพิ่มลิงก์การนัดหมาย
หากคุณไม่ได้จัดการ Business Profile หรือไม่ต้องการใช้ โซลูชัน Quick Builder Locator Plus โปรดตรวจสอบแพลตฟอร์มการจองการนัดหมายเพื่อดูเอกสารประกอบเกี่ยวกับการฝังวิดเจ็ตการจองลงในเว็บไซต์หรือแอป อีกทางเลือกหนึ่งคือการใช้ Google Cloud เช่น Cloud Spanner สำหรับการจัดการสินค้าคงคลัง (วิดีโอ)
กำลังแสดงข้อเสนอในพื้นที่
คุณสามารถแสดงข้อเสนอในท้องถิ่นเพื่อให้ผู้ใช้คลิกได้ในแผงด้านข้างของรายละเอียดสถานที่สำหรับสถานที่ตั้ง Google My Business API ช่วยให้คุณสามารถสร้างและเรียกข้อมูล "โพสต์" (เช่น ข้อเสนอในร้าน) ที่เชื่อมโยงกับสถานที่ของคุณ รูปต่อไปนี้แสดงตัวอย่างข้อเสนอพิเศษในท้องถิ่นในแผงด้านข้างของรายละเอียดสถานที่
(แผนภาพสถาปัตยกรรมในส่วนก่อนหน้านี้แสดงเทคโนโลยีที่พร้อมใช้งานสำหรับการเพิ่มข้อเสนอลงในเครื่องระบุตำแหน่ง)
เนื่องจากข้อเสนอในพื้นที่เชื่อมโยงกับสถานที่ตั้ง คุณจึงต้องหารหัสสถานที่ตั้ง Business Profile ที่เชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform สำหรับสถานที่ตั้งที่ผู้ใช้กำลังดูอยู่
เมื่อมีรหัสสถานที่ตั้งของ Business Profile คุณจะดึงข้อมูลข้อเสนอที่เกี่ยวข้องเป็น localPost เพื่อแสดงในแผงด้านข้างของรายละเอียดสถานที่ได้ มีขั้นตอนดังนี้
- ใช้ Google My Business API สร้างโพสต์ข้อเสนอประเภท
OFFERที่คุณต้องการแสดง -
ค้นหารหัสสถานที่ตั้ง / รหัสสถานที่ตั้งของ Business Profile ที่เชื่อมโยงกับรหัสสถานที่ในแผนที่
เมื่อผู้ใช้ดูรายละเอียดสถานที่ ก็กําลังดูรายละเอียดของรหัสสถานที่ของ Google Maps Platform รหัสสถานที่จะเชื่อมโยงกับรหัสสถานที่ตั้งของ Business Profile คุณจึงต้องหารหัสสถานที่ตั้งตามรหัสสถานที่ในแผนที่เพื่อดึงข้อมูลและแสดงลิงก์ข้อเสนอในพื้นที่สำหรับสถานที่ตั้งของคุณ เรียกใช้ Business Profile API ต่อไปนี้
- แสดงรายการบัญชีของโปรเจ็กต์
- แสดงตำแหน่งทั้งหมดภายในบัญชี
- ในสถานที่ตั้งของบัญชี
LocationKeyจะมีรหัสสถานที่บนแผนที่ซึ่งคุณเปรียบเทียบกับรหัสสถานที่ของสถานที่ตั้งที่กำลังดูได้
ต่อไปนี้คือตัวอย่างคำขอสำหรับรายละเอียดของสถานที่ใน Business Profile API
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
คำตอบจะมีช่อง
locationKeyซึ่งเป็นรหัสสถานที่ที่ใช้กับคำขอ Google Maps Platform ได้ขยายเพื่อดูตัวอย่างคำตอบ
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
เมื่อมีรหัสสถานที่ตั้งแล้ว คุณก็สามารถรับข้อเสนอที่ต้องการได้ หากต้องการดึงข้อมูลโพสต์ข้อเสนอที่มีอยู่ ให้ระบุ
localPostsที่มีอยู่สำหรับสถานที่ตั้ง แล้วกรองtopicTypeจากOFFERเพื่อค้นหาเนื้อหาข้อเสนอที่ต้องการใช้ต่อไปนี้คือตัวอย่างคำขอที่แสดงโพสต์ในพื้นที่ที่ใช้งานอยู่สำหรับสถานที่
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
ตัวอย่างต่อไปนี้แสดง
OFFERlocalPostในคำตอบขยายเพื่อดูตัวอย่างคำตอบ
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], } - สร้างและป้อนข้อมูล
<div>ในแผงด้านข้างด้วยข้อมูลที่เกี่ยวข้องจากออบเจ็กต์localPost
การปรับแต่งแผนที่ของคุณ
คุณสามารถเปลี่ยนลักษณะที่ปรากฏและรายละเอียดของแผนที่ได้หลายวิธี ตัวอย่างเช่น คุณจะดำเนินการต่อไปนี้ได้
- สร้างเครื่องหมายที่กำหนดเองเพื่อแทนที่หมุดแผนที่เริ่มต้น
- เปลี่ยนสีของจุดสนใจบนแผนที่เพื่อแสดงถึงแบรนด์ของคุณ
- ควบคุมจุดที่น่าสนใจที่แสดง (สถานที่น่าสนใจ อาหาร ที่พัก และอื่นๆ) และความหนาแน่นระดับใด เพื่อช่วยให้คุณจดจ่อกับความสนใจของผู้ใช้ในสถานที่ตั้งของคุณ ในขณะเดียวกันก็ไฮไลต์จุดสังเกตที่ช่วยให้ผู้ใช้ไปยังสถานที่ใกล้เคียงที่สุดได้
การสร้างเครื่องหมายบนแผนที่ที่กำหนดเอง
คุณปรับแต่งเครื่องหมายได้โดยการเปลี่ยนสีเริ่มต้น (อาจแสดงให้เห็นว่าสถานที่เปิดอยู่หรือไม่ในขณะนี้) หรือแทนที่เครื่องหมายด้วยรูปภาพที่กำหนดเอง เช่น โลโก้ของแบรนด์ หน้าต่างข้อมูลหรือหน้าต่างป๊อปอัปสามารถให้ข้อมูลเพิ่มเติมแก่ผู้ใช้ เช่น เวลาทำการ หมายเลขโทรศัพท์ หรือแม้กระทั่งรูปภาพ นอกจากนี้ คุณยังสร้างเครื่องหมายที่กำหนดเองที่เป็นแรสเตอร์ เวกเตอร์ ลากได้ หรือแม้แต่ภาพเคลื่อนไหวได้ด้วย
ต่อไปนี้เป็นตัวอย่างแผนที่ที่ใช้เครื่องหมายที่กำหนดเอง (ดูซอร์สโค้ดใน หัวข้อตัวทำเครื่องหมายที่กำหนดเองของ Maps JavaScript API)
ดูข้อมูลโดยละเอียดได้จากเอกสารเครื่องหมายสำหรับ JavaScript (เว็บ), Android และ iOS
การจัดรูปแบบแผนที่ของคุณ
Google Maps Platform ให้คุณจัดรูปแบบแผนที่ในรูปแบบที่ช่วยให้ผู้ใช้ค้นหาตำแหน่งที่ใกล้ที่สุด ไปถึงจุดนั้นโดยเร็วที่สุด และช่วยคุณเสริมสร้างแบรนด์ของคุณ ตัวอย่างเช่น คุณเปลี่ยนสีของแผนที่ให้ตรงกับการสร้างแบรนด์ และลด สิ่งรบกวนในแผนที่ได้โดยการควบคุมจุดที่น่าสนใจที่ผู้ใช้มองเห็นได้ นอกจากนี้ Google Maps Platform ยังมีเทมเพลตเริ่มต้นของแผนที่จำนวนหนึ่ง ซึ่งบางเทมเพลตได้รับการเพิ่มประสิทธิภาพให้เหมาะกับอุตสาหกรรมต่างๆ เช่น การท่องเที่ยว โลจิสติกส์ อสังหาริมทรัพย์ และการค้าปลีก
คุณสร้างหรือแก้ไขรูปแบบแผนที่ได้ในหน้ารูปแบบแผนที่ของคอนโซล Google Cloud ในโปรเจ็กต์
ขยายเพื่อดูภาพเคลื่อนไหวของการสร้างและจัดรูปแบบแผนที่ใน Cloud Console
รูปแบบแผนที่อุตสาหกรรม
ภาพเคลื่อนไหวนี้แสดงรูปแบบแผนที่เฉพาะอุตสาหกรรมที่กําหนดไว้ล่วงหน้าซึ่งคุณสามารถใช้ได้ สไตล์เหล่านี้เป็นจุดเริ่มต้นที่ดีที่สุดสำหรับอุตสาหกรรมแต่ละประเภท ตัวอย่างเช่น รูปแบบแผนที่ร้านค้าปลีกจะลดจุดสนใจบนแผนที่ ทำให้ผู้ใช้จดจ่อกับตำแหน่งของคุณได้ รวมถึงจุดสังเกตเพื่อช่วยให้ไปยังตำแหน่งที่ใกล้ที่สุดได้อย่างรวดเร็วและมั่นใจมากที่สุด
การควบคุมจุดที่น่าสนใจ
ภาพเคลื่อนไหวนี้กำหนดสีเครื่องหมายของจุดที่น่าสนใจและเพิ่มความหนาแน่นของจุดที่น่าสนใจในรูปแบบแผนที่ ยิ่งความหนาแน่นสูง เครื่องหมายจุดที่น่าสนใจจะปรากฏบนแผนที่มากขึ้น
แผนที่แต่ละรูปแบบจะมีรหัสของตัวเอง หลังจากที่เผยแพร่สไตล์ใน Cloud Console คุณจะอ้างอิงรหัสแผนที่นั้นในโค้ด ซึ่งหมายความว่าคุณจะอัปเดตรูปแบบแผนที่แบบเรียลไทม์โดยไม่ต้องเปลี่ยนโครงสร้างภายในแอปได้ รูปลักษณ์ใหม่นี้จะปรากฏในแอปพลิเคชันที่มีอยู่โดยอัตโนมัติและใช้ข้ามแพลตฟอร์มได้ ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มรหัสแผนที่ลงในหน้าเว็บโดยใช้ Maps JavaScript API
เมื่อรวม map_ids อย่างน้อย 1 รายการใน URL ของสคริปต์ Maps JavaScript API จะทำให้รูปแบบเหล่านั้นพร้อมใช้งานโดยอัตโนมัติเพื่อการแสดงผลแผนที่ที่รวดเร็วขึ้นเมื่อคุณเรียกใช้รูปแบบดังกล่าวในโค้ด
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
โค้ดต่อไปนี้จะแสดงแผนที่ที่มีการจัดรูปแบบบนหน้าเว็บ (ไม่ปรากฏเป็นองค์ประกอบ HTML <div id="map"></div> ที่แผนที่จะปรากฏในหน้าเว็บ)
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});
ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวมการจัดรูปแบบแผนที่ในระบบคลาวด์ไว้ใน JavaScript (เว็บ), Android และ iOS
รับข้อมูลเชิงลึกเกี่ยวกับการใช้งานด้วยข้อมูลวิเคราะห์
เมื่อใช้ข้อมูลวิเคราะห์ คุณจะได้รับข้อมูลเชิงลึกที่มีประโยชน์เกี่ยวกับวิธีที่ผู้ใช้โต้ตอบกับตัวระบุตำแหน่ง ส่วนนี้จะมีคำแนะนำเกี่ยวกับการกำหนดค่าและการตรวจสอบ Google Analytics และ การวิเคราะห์ Business Profile เพื่อติดตามข้อมูลที่คุณสนใจมากที่สุด สำหรับผู้ใช้ Quick Builder Plus แดชบอร์ดข้อมูลวิเคราะห์จะช่วยคุณวิเคราะห์และสร้างข้อมูลเชิงลึก ทำให้คุณเห็นภาพว่าผู้เข้าชมเว็บไซต์มีส่วนร่วมกับเครื่องระบุตำแหน่งร้านของคุณได้ดีเพียงใด โดยอิงตามข้อมูลที่ไม่ระบุตัวบุคคล
หากต้องการเข้าถึงรายงานนี้ ให้ไปที่ ส่วนรายงานการมีส่วนร่วมของ Cloud Console ดูรายละเอียดเพิ่มเติมเกี่ยวกับรายงานนี้ได้ที่รายงานการมีส่วนร่วม
ด้วยประสิทธิภาพและความยืดหยุ่นของ Google Analytics เราจะไม่พยายามให้ข้อมูลการตั้งค่าและการใช้งานที่ครอบคลุม แต่เราจะแนะนำเอกสารสำคัญเพื่อให้คุณอ่านและวิธีการเพิ่มเติม พร้อมกับเน้นข้อควรพิจารณาที่สำคัญเกี่ยวกับการวิเคราะห์สำหรับแอประบุตำแหน่ง
การตั้งค่า Google Analytics
หากใช้ Google Analytics กับแอปอยู่แล้ว ให้ข้ามส่วนนี้
ต่อไปนี้เป็นตัวอย่างของ “แท็กที่ติดทั่วเว็บไซต์” ที่คุณวางในเว็บไซต์เพื่อเปิดใช้ Google Analytics
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XR5B5D4NW0');
</script>
ไม่ว่าจะใช้ Google Tag Manager หรือเพิ่ม Google Analytics ลงในเว็บไซต์โดยตรง สิ่งสำคัญคือการทำความเข้าใจวิธีใช้ Google Analytics เพื่อทำสิ่งต่อไปนี้
- ทริกเกอร์การโต้ตอบของผู้ใช้ เช่น การคลิก ซึ่งสามารถวัดได้โดยแยกต่างหากจากการดูหน้าเว็บในเว็บไซต์ (เหตุการณ์)
- ดูข้อมูลดิบ (metrics) ในการจัดกลุ่มอย่างมีความหมาย (มิติข้อมูลหรือมิติข้อมูลที่กำหนดเอง)
การใช้เหตุการณ์ที่กำหนดเอง
ต่อไปนี้คือตัวอย่างการกําหนดเหตุการณ์ที่กําหนดเองในเครื่องระบุตำแหน่ง
gtag('event', 'location', {
'method': 'address'
});
คุณควรตั้งชื่อ event และ method ให้ชัดเจนพอที่จะเข้าใจเหตุการณ์ในการรายงาน ให้ทริกเกอร์สำหรับการโต้ตอบที่เฉพาะเจาะจงที่คุณต้องการวัด เช่น เมื่อผู้ใช้เลือกและที่อยู่จากรายการแบบเลื่อนลงของการเติมข้อความอัตโนมัติ ซึ่งแสดงในรูปต่อไปนี้
คุณสามารถส่งการเรียกการติดตามต่อไปนี้ไปยัง Google Analytics ที่ใช้เหตุการณ์และวิธีการที่คุณกำหนด (เราจะแสดงพารามิเตอร์การค้นหาแต่ละตัวแยกบรรทัดกันเพื่อให้อ่านง่ายขึ้น)
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
รูปต่อไปนี้แสดงลักษณะที่การเรียก Google Analytics ปรากฏในมุมมอง "ตรวจสอบ" ของเบราว์เซอร์ในแท็บ "เครือข่าย" (คลิกเพื่อขยาย)
คุณสามารถตรวจสอบได้ว่าแท็กเหตุการณ์ที่กำหนดเองมีการบันทึกไว้อย่างถูกต้องหรือไม่โดยการดูมุมมอง "เรียลไทม์" ใน Google Analytics เช่น เหตุการณ์ "ตำแหน่ง" ที่ตั้งค่าไว้ก่อนหน้านี้สำหรับการเติมข้อมูลอัตโนมัติเกี่ยวกับสถานที่จะปรากฏใน Google Analytics ดังที่แสดงในรูปต่อไปนี้
หรือจะตรวจสอบเหตุการณ์แบบเรียลไทม์โดยใช้ DebugView ดังที่แสดงในรูปต่อไปนี้ก็ได้ โปรดทราบว่าคุณต้องรอ 24 ชั่วโมงจึงจะเข้าถึงรายงานเหตุการณ์ฉบับเต็มได้ในส่วนการมีส่วนร่วม > เหตุการณ์ของ Google Analytics
นอกจากนี้คุณยังพัฒนาและวัดผลกลยุทธ์เพื่อเพิ่มยอดเข้าชมหน้าร้านจริงจากแอปตัวระบุตำแหน่งได้ด้วย เช่น Google Analytics มีข้อเสนอการเข้าชมร้านค้าใน Analytics ที่ลิงก์ข้อมูลวิเคราะห์การเข้าชมร้านค้า (วัดโดย Google Ads) กับข้อมูลวิเคราะห์เครื่องระบุตำแหน่ง และยังพัฒนากลยุทธ์การเลือกสถานที่ตั้งในแอปได้อีกด้วย เช่น ข้อเสนอออนไลน์ที่แลกสิทธิ์ได้ที่หน้าร้านจริง
เมตริก Business Profile
นอกจากการติดตามเหตุการณ์ เมตริก และมิติข้อมูลที่คุณสนใจด้วย Google Analytics แล้ว Business Profile ยังมีmetricsเป็นของตนเองด้วย เช่น หากเพิ่มลิงก์การจองการนัดหมายและลิงก์ข้อเสนอในพื้นที่ลงในเครื่องระบุตำแหน่งร้าน คุณจะได้รับเมตริกเกี่ยวกับการดูและการคลิกเหล่านั้น
ตัวอย่างคำขอต่อไปนี้ที่ส่งไปยัง Business Profile API จะขอเมตริกหลายประเภท สำหรับการติดตามการคลิกข้อเสนอ เมตริก LOCAL_POST_VIEWS_SEARCH และ LOCAL_POST_ACTIONS_CALL_TO_ACTION มีความเกี่ยวข้องมากที่สุด
ขยายเพื่อดูตัวอย่างคำขอ
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
"locationNames": [
"accounts/111098884960528804666/locations/15899957830169237700"
],
"basicRequest": {
"metricRequests": [
{
"metric": "QUERIES_DIRECT"
},
{
"metric": "QUERIES_INDIRECT"
},
{
"metric": "VIEWS_MAPS"
},
{
"metric": "VIEWS_SEARCH"
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS"
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH"
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
}
],
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
}
}
ขยายเพื่อดูตัวอย่างคำตอบ
{
"locationMetrics": [
{
"locationName": "accounts/111098884960528804666/locations/15899957830169237700",
"timeZone": "Asia/Singapore",
"metricValues": [
{
"metric": "QUERIES_DIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "82"
}
},
{
"metric": "QUERIES_INDIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1493"
}
},
{
"metric": "VIEWS_MAPS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1571"
}
},
{
"metric": "VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "631"
}
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "3"
}
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "42"
}
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "11"
}
}
]
}
]
}
โดยการตอบกลับจะมีเมตริก สิ่งที่ควรทราบมากที่สุดคือ
- มีการดูสถานที่นี้ 1,571 ครั้งบน Google Maps
- ยอดดูสถานที่ตั้ง 631 ครั้งใน Google Search
- คำขอเส้นทางการขับขี่ไปยังสถานที่ตั้ง 3 รายการ
- การคลิกข้อเสนอของ
LOCAL_POST_ACTIONS_CALL_TO_ACTION42 ครั้ง - การดูโพสต์ในพื้นที่บน Google Search 11 ครั้ง
ตัวเลือกเมตริกอื่นคือการใช้จองกับ Google เพื่อสร้างลิงก์การดำเนินการ เมื่อผู้ใช้คลิกลิงก์การดำเนินการที่สร้างขึ้นใน "จองกับ Google" คุณจะบันทึกการกระทำเหล่านั้นไปยัง Google Analytics ได้ ซึ่งจะช่วยให้คุณติดตาม Conversion ใน Google Analytics ได้ ดูข้อมูลเพิ่มเติมได้ในเอกสารเครื่องมือวัด Conversion
ไม่ว่าคุณจะใช้กลยุทธ์เมตริกใด การวัดผลจะเป็นมากกว่าการดูว่าคุณทำได้ดีเพียงใดเทียบกับ KPI ตัวเลขเหล่านี้ยังช่วยให้คุณเข้าใจผลกระทบที่การปรับปรุงเครื่องระบุตำแหน่งเหล่านี้ มีต่อธุรกิจของคุณ นอกจากนี้ คุณยังเปรียบเทียบเมตริกจาก Google Analytics ในเครื่องระบุตำแหน่งกับเมตริกของ Business Profile ได้ด้วย เช่น เมื่อเปรียบเทียบเมตริกเหล่านี้ คุณจะเห็นจำนวนลูกค้าที่กำลังขอเส้นทางจากเครื่องระบุตำแหน่งร้านและ Google Maps เพื่อเข้าชมสถานที่ตั้งจริงของคุณ
การเพิ่มประสิทธิภาพ Locator Plus
คุณสามารถปรับปรุงประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้นได้ ทั้งนี้ขึ้นอยู่กับความต้องการทางธุรกิจหรือผู้ใช้
กำลังส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่
คุณสามารถส่งข้อความหรือส่งลิงก์เส้นทางให้ทางอีเมลเพื่อช่วยให้ผู้ใช้ไปถึงสถานที่หนึ่งๆ ได้ง่ายขึ้น เมื่อผู้ใช้คลิก แอป Google Maps จะเปิดขึ้นในโทรศัพท์ หากมีการติดตั้งแอปไว้ หรือ maps.google.com จะโหลดในเว็บเบราว์เซอร์ของอุปกรณ์ ประสบการณ์ทั้ง 2 อย่างนี้ช่วยให้ผู้ใช้สามารถใช้การนำทางแบบเลี้ยวต่อเลี้ยว รวมถึงการนำทางด้วยเสียงเพื่อไปถึงจุดหมายได้
ใช้
URL ของ Maps เพื่อเขียน URL เส้นทางดังตัวอย่างต่อไปนี้ โดยใช้ชื่อสถานที่ที่เข้ารหัส URL เป็นพารามิเตอร์ destination และรหัสสถานที่เป็นพารามิเตอร์ destination_place_id การเขียนหรือใช้ URL ของ Maps ไม่มีค่าใช้จ่าย คุณจึงไม่จำเป็นต้องใส่คีย์ API ใน URL
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
หรือจะระบุพารามิเตอร์การค้นหา origin โดยใช้รูปแบบที่อยู่เดียวกับปลายทางก็ได้ (ไม่บังคับ) แต่การละเลยจะทำให้เส้นทางเริ่มต้นจากตำแหน่งปัจจุบันของผู้ใช้ ซึ่งอาจต่างจากที่ที่พวกเขาใช้แอป Locator Plus ของคุณ URL ของ Maps มีตัวเลือกพารามิเตอร์การค้นหาเพิ่มเติม เช่น travelmode และ dir_action=navigate เพื่อเปิดเส้นทางที่เปิดการนำทางไว้
ลิงก์ที่คลิกได้นี้ซึ่งขยายตัวอย่าง URL ข้างต้นตั้งค่า origin
เป็นสนามฟุตบอลลอนดอน และใช้ travelmode=transit เพื่อแสดง
เส้นทางขนส่งสาธารณะไปยังจุดหมาย
หากต้องการส่งข้อความหรืออีเมลที่มี URL นี้ เราแนะนำให้ใช้แอปพลิเคชันของบุคคลที่สาม เช่น twilio หากใช้ App Engine คุณสามารถใช้บริษัทบุคคลที่สามเพื่อส่งข้อความ SMS หรืออีเมลได้ ดูข้อมูลเพิ่มเติมได้ที่ การส่งข้อความด้วยบริการของบุคคลที่สาม
การแสดง Street View เพื่อช่วยให้ผู้ใช้เห็นภาพสถานที่
สำหรับสถานที่หลายแห่งทั่วโลกนั้นสามารถใช้ Street View แสดงด้านนอกของสถานที่นั้นๆ เพื่อให้ผู้ใช้เห็นภาพสถานที่ก่อนที่จะเดินทางมาถึงจริง คุณอาจจัดเตรียม Street View ในแบบฟอร์มอินเทอร์แอกทีฟ (เว็บ) หรือแบบแบบคงที่ (API) โดยขึ้นอยู่กับว่าคุณต้องการให้ผู้ใช้ "มองไปรอบๆ" พื้นที่ในแบบ 360 องศา Street View ยังใช้งานได้ใน Android และ iOS ด้วย
การระบุสถานที่ตั้งของผู้ใช้ด้วยตำแหน่งทางภูมิศาสตร์
ในกรณีส่วนใหญ่ คุณจะระบุตำแหน่งของผู้ใช้ได้โดยใช้บริการตำแหน่งที่ติดตั้งมาในอุปกรณ์หรือเบราว์เซอร์ของผู้ใช้ เราแสดงตัวอย่างของ การใช้ฟีเจอร์ตำแหน่งทางภูมิศาสตร์ของ HTML5 ของเบราว์เซอร์เพื่อแสดงตำแหน่งทางภูมิศาสตร์ของผู้ใช้หรืออุปกรณ์บนแผนที่ของ Google และมีเอกสารประกอบเกี่ยวกับการขอสิทธิ์และการได้ตำแหน่งใน Android และ iOS แต่อาจมีบางสถานการณ์ที่คุณต้องการใช้เครื่องมือค้นหาตำแหน่งอื่น เช่น หากมีการปิดใช้บริการตำแหน่งของอุปกรณ์ หรือคุณกังวลว่าจะมีการปลอมแปลงตำแหน่งอุปกรณ์
Geolocation API เป็น API ฝั่งเซิร์ฟเวอร์ซึ่งแสดงตำแหน่งและรัศมีความแม่นยำโดยอิงจากข้อมูลเกี่ยวกับเสาสัญญาณมือถือและโหนด Wi-Fi ที่ไคลเอ็นต์ตรวจพบได้ คุณใช้ตำแหน่งทางภูมิศาสตร์เป็นกลไกสำรองในการระบุตำแหน่งของผู้ใช้ได้ หรือจะใช้ตำแหน่งทางภูมิศาสตร์ดังกล่าวเพื่อตรวจสอบตำแหน่งที่อุปกรณ์รายงานร่วมกันก็ได้
การรวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่
ในส่วนการให้รายละเอียดสถานที่ก่อนหน้านี้ เราพูดถึงการใช้รายละเอียดสถานที่เพื่อให้ผู้ใช้มีข้อมูลจำนวนมากเกี่ยวกับสถานที่ตั้งของคุณ เช่น เวลาทำการ รูปภาพ และรีวิว
คุณควรทำความเข้าใจค่าใช้จ่ายของช่องข้อมูลต่างๆ ในรายละเอียดสถานที่ ซึ่งจัดหมวดหมู่เป็นข้อมูลพื้นฐาน รายชื่อติดต่อ และชั้นบรรยากาศ กลยุทธ์หนึ่งในการจัดการค่าใช้จ่ายคือการรวมข้อมูลที่มีอยู่แล้วเกี่ยวกับสถานที่ตั้งของคุณกับข้อมูลล่าสุด (มักจะเป็นข้อมูลพื้นฐานและข้อมูลติดต่อ) จาก Google Maps เช่น การปิดชั่วคราว เวลาทำการในวันหยุด และการให้คะแนน รูปภาพ และรีวิวจากผู้ใช้ หากคุณมีข้อมูลติดต่อสำหรับสถานที่ตั้งอยู่แล้ว คุณไม่จำเป็นต้องขอช่องเหล่านั้นจากรายละเอียดสถานที่ และสามารถจำกัดคำขอให้ดึงข้อมูลเฉพาะช่องพื้นฐานหรือช่องข้อมูลบรรยากาศ ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณต้องการให้แสดง
คุณอาจมีข้อมูลสถานที่ของคุณเองเพื่อเสริมหรือใช้แทนรายละเอียดสถานที่ codelab สำหรับตัวระบุตำแหน่งแบบเต็มสแต็กมีตัวอย่างการใช้ GeoJSON กับฐานข้อมูลเพื่อจัดเก็บและเรียกดูรายละเอียดตำแหน่งของคุณเอง