ภาพรวม
Google Maps Platform พร้อมให้บริการสำหรับเว็บ (JS, TS), Android และ iOS และยังมี API บริการเว็บสำหรับรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทางด้วย ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มเดียว แต่เราได้ระบุลิงก์เอกสารประกอบสำหรับการติดตั้งใช้งานในแพลตฟอร์มอื่นๆ ไว้แล้ว
Quick Builder ใน Google Cloud Console ช่วยให้คุณสร้างเครื่องมือระบุตำแหน่งได้อย่างรวดเร็ว รวมถึงนำเข้า ข้อมูล Business Profile และฝังลิงก์การจองการนัดหมายจาก ผู้ให้บริการบุคคลที่สามโดยอัตโนมัติ UI แบบอินเทอร์แอกทีฟช่วยให้คุณสร้างโค้ดและนำไปใช้งานใน Cloud ได้ภายในไม่กี่นาที
ผู้ใช้ต้องการค้นคว้าข้อมูลผลิตภัณฑ์และบริการทางออนไลน์ รวมถึงค้นหาสถานที่ที่ดีที่สุดและสะดวกที่สุด เพื่อเข้าชม ทำการนัดหมาย หรือรับสินค้า ผู้ใช้ต้องการไปที่สถานที่ตั้งของคุณให้เร็วที่สุด และคุณก็ต้องการมอบประสบการณ์ออนไลน์ที่ยอดเยี่ยมซึ่งจะเพิ่มการเข้าชมสถานที่ตั้งจริง เสริมสร้างความพึงพอใจของผู้ใช้ และลดการโทรขอรับการสนับสนุน นอกจากนี้ คุณยังต้องวัดผล ความสำเร็จของเครื่องมือระบุตำแหน่งเพื่อดูว่าลูกค้าค้นหาสถานที่ตั้งของคุณได้หรือไม่ และคุณต้องทำความเข้าใจว่าควรปรับปรุงตรงไหน
Locator Plus ซึ่งเป็นคำแนะนำและเคล็ดลับการปรับแต่งที่เราให้ไว้ในเอกสารนี้ คือสิ่งที่เราแนะนำว่าเป็นชุด API ของ Google Maps Platform ที่ดีที่สุด ในการสร้างประสบการณ์ของผู้ใช้ที่ยอดเยี่ยมสำหรับเครื่องมือระบุตำแหน่ง การปฏิบัติตามแนวทางเหล่านี้จะช่วยให้ผู้ใช้ค้นหาสถานที่ของคุณบนแผนที่ ดูข้อมูลโดยละเอียดที่จำเป็นต่อการตัดสินใจ และรับเส้นทาง ไม่ว่าจะขับรถ ปั่นจักรยาน เดิน หรือใช้ขนส่งสาธารณะ
สําหรับผู้ใช้ Locator Plus แดชบอร์ดข้อมูลวิเคราะห์จะช่วยคุณวิเคราะห์และสร้างข้อมูลเชิงลึก จากข้อมูลของคุณ ซึ่งจะช่วยให้คุณเห็นภาพที่ชัดเจนว่าผู้เลือกซื้อมีส่วนร่วมกับ เครื่องมือระบุตำแหน่งร้านค้าของคุณได้ดีเพียงใด หากต้องการเข้าถึงรายงานนี้ ให้ไปที่ส่วนรายงานการมีส่วนร่วมของคอนโซล ดูรายละเอียดเพิ่มเติมเกี่ยวกับรายงานนี้ได้ที่ รายงานการมีส่วนร่วม
แผนภาพต่อไปนี้แสดง API หลักๆ ที่เกี่ยวข้องกับการติดตั้งใช้งาน Locator Plus นอกจากนี้ แผนภาพยังแสดงฐานข้อมูลของข้อมูลตำแหน่งของคุณเอง ซึ่งคุณสามารถรวมเข้ากับ รายละเอียดสถานที่เพื่อมอบชุดข้อมูลที่ดีที่สุดและสมบูรณ์ที่สุดเท่าที่จะเป็นไปได้ให้แก่ผู้ใช้ (คลิกเพื่อขยาย)
กำลังเปิดใช้ API
หากต้องการใช้แนวทางปฏิบัติเหล่านี้ คุณต้องเปิดใช้ API ต่อไปนี้ในคอนโซล Google Cloud ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่ เริ่มต้นใช้งาน Google Maps Platformส่วนการติดตั้งใช้งาน
แนวทางปฏิบัติและการปรับแต่งที่เราจะกล่าวถึงในเอกสารนี้มีดังนี้
- ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติหลัก
- ไอคอนดาวเป็นตัวเลือกการปรับแต่งที่ไม่บังคับ แต่ขอแนะนําให้ใช้เพื่อ ปรับปรุงโซลูชัน
| การแสดงตำแหน่งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ |
สร้างแผนที่ที่ช่วยให้ผู้ใช้ดูรายละเอียดตำแหน่ง เลื่อนไปมา รวมถึงซูมเข้าและออกได้ หรือจะดู โซลูชัน Quick Builder Locator Plus เพื่อสร้างแผนที่อย่างรวดเร็ว ซึ่งรวมถึงการนำเข้ารายละเอียดทางธุรกิจจากข้อมูล Business Profile การฝังลิงก์การจองนัดหมาย และการติดตั้งใช้งานใน Google Cloud Storage |
|
| การระบุรายละเอียดสถานที่ | หลังจากที่ผู้ใช้พบสถานที่ที่ใกล้ที่สุดในแผนที่แล้ว ให้รายละเอียดสถานที่ที่มีประโยชน์ เกี่ยวกับสถานที่ดังกล่าวเพื่อช่วยให้ผู้ใช้ตัดสินใจได้ | |
| การแสดงสถานที่จากมุมมอง 45° | ช่วยให้ผู้ใช้เห็นภาพตำแหน่งของคุณได้ดียิ่งขึ้นในมุมมองดาวเทียมจากมุม 45 องศา | |
| การระบุตำแหน่งของผู้ใช้ | เพิ่มฟังก์ชันการพิมพ์ขณะที่พิมพ์เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์มและ ปรับปรุงความแม่นยำของที่อยู่ด้วยการกดแป้นพิมพ์น้อยที่สุด | |
| แสดงระยะเวลาเดินทางและระยะทางไปยังสถานที่ที่ใกล้ที่สุด | คำนวณระยะทางการเดินทางและระยะเวลาเดินทางสำหรับต้นทางและปลายทางหลายแห่ง โดยอาจระบุรูปแบบการเดินทางต่างๆ เช่น การเดิน การขับรถ หรือการปั่นจักรยาน | |
| ช่วยผู้ใช้นัดหมาย |
อนุญาตให้ผู้ใช้จองการนัดหมายจากแผงด้านข้างของรายละเอียดสถานที่ หรือจะดู โซลูชัน Quick Builder Locator Plus เพื่อสร้างแผนที่อย่างรวดเร็ว ซึ่งรวมถึงการนำเข้ารายละเอียดทางธุรกิจจากข้อมูล Business Profile การฝังลิงก์การจองนัดหมาย และการติดตั้งใช้งานใน Google Cloud Storage |
|
| การแสดงข้อเสนอในสตรีม | แสดงข้อเสนอในสตรีมที่คลิกได้ต่อผู้ใช้ในแผงด้านข้างของรายละเอียดสถานที่ | |
| ให้คำแนะนำการนำทาง | รับข้อมูลเส้นทางจากต้นทางไปยังจุดหมายโดยใช้รูปแบบการเดินทางต่างๆ เช่น การเดิน การขับรถ การปั่นจักรยาน และการขนส่งสาธารณะ | |
| การปรับแต่งแผนที่ | สร้างเครื่องหมายแผนที่ที่กำหนดเองเพื่อช่วยให้สถานที่ตั้งของคุณโดดเด่น และจัดรูปแบบแผนที่ให้ ตรงกับสีของแบรนด์ แสดง (หรือซ่อน) จุดที่น่าสนใจ (POI) ที่เฉพาะเจาะจงบน แผนที่เพื่อช่วยให้ผู้ใช้ทราบตำแหน่งของตนเองได้ดียิ่งขึ้น และควบคุมความหนาแน่นของ POI เพื่อ ป้องกันไม่ให้แผนที่รก | |
| รับข้อมูลเชิงลึกด้านการใช้งานด้วยข้อมูลวิเคราะห์ | กําหนดค่าและใช้ Google Analytics เพื่อรับข้อมูลเชิงลึกเกี่ยวกับกลยุทธ์ และการติดตั้งใช้งานเครื่องมือระบุตำแหน่ง | |
| ส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่ | นอกจากจะแสดงเส้นทางในเครื่องระบุตำแหน่งแล้ว คุณยังส่งเส้นทางไปยังโทรศัพท์ของผู้ใช้เพื่อนำทางโดยใช้ Google Maps ได้ทุกที่ทุกเวลา | |
| การแสดง Street View เพื่อช่วยให้ผู้ใช้เห็นภาพสถานที่ | แสดงภาพ Street View พร้อมมุมมอง 360 องศาแก่ผู้ใช้เพื่อช่วยให้ผู้ใช้ทราบตำแหน่งและ ค้นหาสถานที่ของคุณได้เร็วขึ้น | |
| การกำหนดตำแหน่งของผู้ใช้ด้วยตำแหน่งทางภูมิศาสตร์ | หากไม่ต้องการใช้บริการตำแหน่งในอุปกรณ์ ให้ใช้ ตำแหน่งทางภูมิศาสตร์เพื่อช่วยระบุตำแหน่งของผู้ใช้ | |
| การรวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่ | รวมรายละเอียดสถานที่ตั้งที่กำหนดเองของคุณเองเข้ากับรายละเอียดสถานที่ เพื่อให้ผู้ใช้มีชุดข้อมูลที่ครบถ้วนสำหรับการตัดสินใจ |
การแสดงตำแหน่งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ
เครื่องมือระบุตำแหน่งเป็นส่วนสำคัญของประสบการณ์ของผู้ใช้ อย่างไรก็ตาม บางเว็บไซต์อาจไม่มีแม้แต่แผนที่ ทำให้ผู้ใช้ต้องออกจากเว็บไซต์หรือแอปเพื่อค้นหาสถานที่ใกล้เคียง ซึ่งหมายความว่าผู้ใช้ที่ต้อง ไปยังหน้าต่างๆ เพื่อรับข้อมูลที่ต้องการจะได้รับประสบการณ์ที่ไม่ดี แต่คุณสามารถปรับปรุง ประสบการณ์นี้ได้โดยการฝังและปรับแต่งแผนที่ลงในแอปพลิเคชัน
คุณเปิดใช้ฟังก์ชันนี้ได้ 2 วิธี ได้แก่ ใช้ โซลูชัน Quick Builder Locator Plus เพื่อให้บริการทันที หรือใช้การติดตั้งใช้งานแผนที่แบบไดนามิกของคุณเอง ส่วนนี้จะอธิบายตัวเลือกเหล่านี้โดยละเอียด
การใช้ Quick Builder Locator Plus
คุณสามารถใช้ โซลูชัน Quick Builder Locator Plus เพื่อนําเข้ารายละเอียดทางธุรกิจจาก Business Profile ดังนั้นตอนนี้การเปลี่ยนแปลงรายละเอียดธุรกิจของ Business Profile จะแสดงในเครื่องมือระบุตำแหน่งร้านค้าบนเว็บไซต์ การเปลี่ยนแปลงเหล่านี้อาจรวมถึงเวลาทำการ ข้อมูลติดต่อ รูปภาพ ตัวเลือกบริการ และอื่นๆ Quick Builder ช่วยให้คุณสำรวจการตั้งค่าสถานที่ตั้งของธุรกิจบนแผนที่ สร้างโค้ดที่พร้อมใช้งาน หรือติดตั้งใช้งานโดยตรงใน Google Cloud Storage ได้อย่างรวดเร็วภายในไม่กี่นาที สร้างโค้ดที่พร้อมใช้งาน หรือติดตั้งใช้งานโดยตรงใน Google Cloud Storage ได้อย่างรวดเร็วภายในไม่กี่นาที
การใช้การติดตั้งใช้งานแผนที่แบบไดนามิกของคุณเอง
| ตัวอย่างนี้ใช้ Maps JavaScript API | นอกจากนี้ยังมี Android | iOS |
การเพิ่มแผนที่แบบไดนามิกลงในหน้าเว็บ ซึ่งก็คือแผนที่ที่ผู้ใช้สามารถเลื่อนไปมา ซูมเข้าและออก รวมถึงดูรายละเอียดเกี่ยวกับสถานที่และจุดที่น่าสนใจต่างๆ ทำได้โดยใช้โค้ดเพียงไม่กี่บรรทัด
ก่อนอื่น คุณต้องรวม Maps JavaScript API ไว้ในหน้าเว็บ
ซึ่งทำได้โดยการลิงก์สคริปต์ต่อไปนี้ในหน้า HTML รวมถึง
libraries=marker เพื่อให้คุณเพิ่มเครื่องหมายขั้นสูงลงในแผนที่ได้
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
URL อ้างอิงถึงinitMapฟังก์ชัน JavaScript ที่ทํางานเมื่อหน้าเว็บ
โหลด ใน URL คุณยังระบุภาษาหรือภูมิภาคของแผนที่เพื่อให้แน่ใจว่าได้จัดรูปแบบอย่างถูกต้องสำหรับประเทศที่เฉพาะเจาะจงที่คุณกำหนดเป้าหมายได้อีกด้วย การตั้งค่าภูมิภาคยังช่วยให้มั่นใจได้ว่าลักษณะการทำงานของ
แอปที่ใช้นอกสหรัฐอเมริกาจะเอนเอียงไปทางภูมิภาคที่คุณตั้งค่า ดูรายการภาษาและภูมิภาคที่รองรับทั้งหมดได้ใน
รายละเอียดความครอบคลุมของ Google Maps Platform
และดูข้อมูลเพิ่มเติมเกี่ยวกับ
region
การใช้พารามิเตอร์
จากนั้นคุณต้องมี 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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
สำหรับเครื่องระบุตำแหน่ง โดยปกติแล้วคุณจะสนใจการตั้งค่าตำแหน่งเริ่มต้น จุดศูนย์กลาง หรือขอบเขต และระดับการซูม (ระดับการซูมแผนที่ไปยังตำแหน่งนั้น) องค์ประกอบอื่นๆ ส่วนใหญ่ เช่น การปรับแต่งตัวควบคุม เป็นตัวเลือกที่คุณจะใช้หรือไม่ก็ได้ตามระดับการโต้ตอบกับแผนที่
การรับรหัสสถานที่
| ตัวอย่างนี้ใช้ Places API (ใหม่) | นอกจากนี้ยังมี JavaScript |
คุณน่าจะมีฐานข้อมูลของสถานที่ตั้งพร้อมข้อมูลพื้นฐาน เช่น ชื่อของสถานที่ตั้ง ที่อยู่ และหมายเลขโทรศัพท์ หากต้องการดึงข้อมูลที่ Google Maps
Platform มีเกี่ยวกับสถานที่นั้น รวมถึงพิกัดทางภูมิศาสตร์และข้อมูลที่ผู้ใช้มีส่วนร่วม
ให้ค้นหารหัสสถานที่
ที่สอดคล้องกับแต่ละสถานที่ในฐานข้อมูล คุณสามารถ
โทรไปยัง
ปลายทางการค้นหาข้อความ (ใหม่) ใน Places API (ใหม่)
และขอเฉพาะฟิลด์ places.id ใน Field Mask (ซึ่งทริกเกอร์
SKU รหัส Text Search Essentials เท่านั้น)
ตัวอย่างการขอรหัสสถานที่สำหรับสำนักงาน Google ในลอนดอน
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'คุณสามารถจัดเก็บรหัสสถานที่นี้ ในฐานข้อมูลและใช้เป็นวิธีที่มีประสิทธิภาพในการขอข้อมูลเกี่ยวกับสถานที่ ต่อไปนี้เป็น วิธีการใช้รหัสสถานที่เพื่อเข้ารหัสพิกัดภูมิศาสตร์ ดึงข้อมูลรายละเอียดสถานที่ และขอเส้นทาง ไปยังสถานที่
การเข้ารหัสพิกัดภูมิศาสตร์ของสถานที่ตั้ง
| ตัวอย่างนี้ใช้ 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การเพิ่มสถานที่ลงในแผนที่
ขั้นตอนถัดไปคือการเพิ่มสถานที่ลงในแผนที่ โดยปกติแล้วจะทำได้โดยการเพิ่มเครื่องหมายขั้นสูงลงในแผนที่ แม้ว่าจะมีตัวเลือกอื่นๆ อีกมากมายที่คุณใช้ได้ เช่น เลเยอร์ข้อมูล
เมื่อได้ละติจูดและลองจิจูดของสถานที่แล้ว ต่อไปนี้คือตัวอย่างการเพิ่ม เครื่องหมายขั้นสูงที่มีอักขระข้อความที่กำหนดเองลงในแผนที่
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
คุณจะดูตำแหน่งของสถานที่หลายแห่งพร้อมกันได้ด้วยเครื่องหมายเพียงไม่กี่อัน
หากมีสถานที่จำนวนมาก คุณอาจพิจารณาใช้ยูทิลิตีการจัดกลุ่มเครื่องหมายสำหรับ JavaScript, Android หรือ iOS ต่อไปนี้คือตัวอย่างการจัดกลุ่มเครื่องหมายในตัวอย่าง JavaScript Store Locator GitHub
การระบุรายละเอียดสถานที่
| ตัวอย่างนี้ใช้ Maps JavaScript API | นอกจากนี้ยังมี Places API (ใหม่) | Android | iOS |
คุณแชร์รายละเอียดสถานที่ที่ผู้ใช้ควรรู้ก่อนเข้าชมสถานที่ของคุณได้ รายละเอียดสถานที่ที่สมบูรณ์ เช่น ข้อมูลติดต่อ เวลาทำการ การให้คะแนนของผู้ใช้ รูปภาพของผู้ใช้ และสถานะการปิดชั่วคราว จะช่วยให้ผู้ใช้ทราบสิ่งที่คาดหวังได้อย่างชัดเจนเมื่อมาที่สถานที่ของคุณ หลังจากเรียกใช้ Places API (ใหม่) แล้ว คุณจะกรองและ แสดงผลการตอบกลับในหน้าต่างข้อมูล แถบด้านข้างของเว็บ หรือในวิธีอื่นๆ ที่ต้องการได้
หากต้องการขอรายละเอียดสถานที่ คุณจะต้องมีรหัสสถานที่ของแต่ละสถานที่ ดูการรับรหัสสถานที่เพื่อดึงรหัสสถานที่ของ สถานที่ตั้ง
ขยายเพื่อดูวิดีโอสำหรับการขอรายละเอียดสถานที่
รับเวลาทำการ
ตรวจสอบการปิด
ควบคุมต้นทุน
ตัวอย่างต่อไปนี้ใช้คลาส Place ใน Places Library, Maps JavaScript API เพื่อดึงรายละเอียดสถานที่ และเพิ่มลงใน InfoWindow การติดตั้งใช้งานนี้ใช้กลยุทธ์การประหยัดค่าใช้จ่ายโดย ทริกเกอร์คำขอรายละเอียดสถานที่ก็ต่อเมื่อผู้ใช้ขอรายละเอียดโดยคลิก เครื่องหมายแทนที่จะดึงข้อมูลรายละเอียดสำหรับสถานที่ทั้งหมดล่วงหน้าโดยไม่คำนึงถึง ความสนใจของผู้ใช้
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, gmpClickable: true, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("gmp-click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
การแสดงสถานที่ตั้งจากมุมมอง 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 ในอุปกรณ์เคลื่อนที่และเว็บ เมื่อผู้ใช้พิมพ์ ที่อยู่ การเติมข้อความอัตโนมัติจะกรอกส่วนที่เหลือให้โดยใช้วิดเจ็ต คุณยัง ระบุฟังก์ชันการเติมข้อความอัตโนมัติของคุณเองได้โดยใช้ Place Autocomplete Data API โดยตรง
การเพิ่มไลบรารีการเติมข้อความอัตโนมัติของสถานที่ลงในเว็บไซต์เป็นเพียงการเพิ่มพารามิเตอร์การค้นหา 2-3 รายการลงใน URL ของสคริปต์ Maps JavaScript API ในตัวอย่างต่อไปนี้
การเพิ่มคือ libraries=places,marker
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
จากนั้นเพิ่มองค์ประกอบคอนเทนเนอร์ลงในหน้าเว็บที่จะต่อท้ายวิดเจ็ต
PlaceAutocompleteElement
<div id="autocomplete-container"></div>
สุดท้าย ให้เริ่มต้นวิดเจ็ต PlaceAutocompleteElement และต่อท้ายคอนเทนเนอร์
การจำกัดPlace Autocomplete predictionsด้วย includedPrimaryTypes: ["geocode"] จะกำหนดค่าวิดเจ็ตให้ยอมรับที่อยู่ ถนน ย่าน เมือง และรหัสไปรษณีย์ เพื่อให้ผู้ใช้อินพุตระดับความเฉพาะเจาะจงใดก็ได้เพื่ออธิบายต้นทางของตน เมื่อผู้ใช้เลือกการคาดคะเน ระบบจะทริกเกอร์เหตุการณ์
gmp-select และคุณสามารถเรียกใช้ place.fetchFields() เพื่อ
ขอฟิลด์ location ที่มีละติจูดและลองจิจูดของต้นทาง
ของผู้ใช้ คุณจะใช้พิกัดแผนที่เหล่านี้เพื่อจัดกึ่งกลางแผนที่ใหม่และระบุความสัมพันธ์
ของสถานที่ตั้งกับต้นทาง
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); }); }
ในตัวอย่างนี้ เมื่อผู้ใช้เลือกที่อยู่แล้ว ระบบจะเรียกใช้ฟังก์ชัน
addUserLocation() ซึ่งจะใช้ตำแหน่งของผลการค้นหาที่ตรงกัน ย้าย
แผนที่ไปยังตำแหน่งนั้น และเพิ่มเครื่องหมายขั้นสูง
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
จากนั้นคุณจะเห็นความสัมพันธ์ระหว่างผู้ใช้กับสถานที่ตั้งใดก็ตาม ดังที่แสดงในรูปภาพต่อไปนี้
ขยายส่วนนี้เพื่อดูวิดีโอแบบทีละขั้นตอนเกี่ยวกับการเพิ่มการเติมข้อความอัตโนมัติของสถานที่ลงในแอป
เว็บไซต์
แอป Android
แอป iOS
แสดงระยะเวลาเดินทางและระยะทางไปยังสถานที่ที่ใกล้ที่สุด
| ตัวอย่างนี้ใช้ Routes API | นอกจากนี้ยังมี Routes Library, Maps JavaScript API |
เมื่อทราบตำแหน่งของผู้ใช้แล้ว คุณจะเปรียบเทียบตำแหน่งนี้กับตำแหน่งของคุณได้ การทำเช่นนี้ด้วยฟีเจอร์คำนวณเมทริกซ์เส้นทางใน Routes API (หรือคลาส RouteMatrix ในไลบรารีเส้นทางของ Maps JavaScript API) จะช่วยให้ผู้ใช้เลือกสถานที่ที่สะดวกที่สุดสำหรับตนเองตามเวลาในการขับรถหรือระยะทางบนถนน
การแสดงสถานที่ตั้งที่อยู่ใกล้ผู้ใช้หมายความว่าคุณได้ป้อนข้อมูลสถานที่ตั้งแล้ว เมื่อใช้ฐานข้อมูลสถานที่ตั้งของคุณเอง สิ่งสำคัญคือต้องตรวจสอบว่าข้อมูลอยู่ในรูปแบบที่ใช้ในแผนที่ได้ เช่น GeoJSON ซึ่งอธิบายไว้ในหัวข้อชั้นข้อมูล
วิธีมาตรฐานในการจัดระเบียบรายการสถานที่คือการจัดเรียงตามระยะทาง โดยปกติแล้ว ระบบจะคำนวณระยะทางนี้โดยใช้เส้นตรงจากผู้ใช้ไปยังสถานที่ตั้ง แต่การคำนวณนี้อาจทำให้เข้าใจผิดได้ เส้นตรงอาจอยู่เหนือแม่น้ำที่ผ่านไม่ได้หรือผ่านถนนที่พลุกพล่าน ในขณะที่ตำแหน่งอื่นอาจสะดวกกว่า ขั้นตอนนี้มีความสำคัญเมื่อคุณมี หลายสถานที่ซึ่งอยู่ห่างกันไม่กี่กิโลเมตร
เมธอด computeRouteMatrix ทำงานโดยรับรายการต้นทางและปลายทาง แล้ว
ส่งคืนไม่เพียงระยะทางการเดินทาง แต่ยังรวมถึงระยะเวลาเดินทางระหว่างต้นทางและปลายทางด้วย ในกรณีของผู้ใช้
ต้นทางจะเป็นตำแหน่งปัจจุบันหรือจุดเริ่มต้นที่ต้องการ และ
ปลายทางจะเป็นตำแหน่งของสถานที่
คุณระบุต้นทางและปลายทางเป็นคู่พิกัด รหัสสถานที่ หรือที่อยู่ได้ คุณใช้
computeRouteMatrix กับค่ากำหนดการกำหนดเส้นทาง เช่น TRAFFIC_AWARE
เพื่อแสดงผลลัพธ์ตามเวลาขับรถปัจจุบันหรือในอนาคตได้
ตัวอย่างต่อไปนี้เรียกใช้ปลายทาง computeRouteMatrix ใน Routes API
โดยระบุรหัสสถานที่ต้นทางและปลายทางของผู้ใช้ ตัวอย่างนี้จะคำนวณ
ระยะทางและระยะเวลาเดินทางจากจุดกึ่งกลางของแผนที่ไปยังสำนักงานของ Google 3 แห่งในลอนดอน
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'การตอบกลับจากบริการจะมีระยะทาง (เป็นเมตร) และระยะเวลาสำหรับแต่ละคู่ต้นทางและปลายทาง คล้ายกับที่แสดงในตัวอย่างต่อไปนี้
ขยายเพื่อดูตัวอย่างการตอบกลับ
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]รูปภาพต่อไปนี้แสดงต้นทาง (เครื่องหมายสีแดง C) และปลายทางบนแผนที่
ระยะทางเส้นตรงและระยะทางของเส้นทางมักจะแตกต่างกัน ดังที่แสดง ในตารางต่อไปนี้
| ตำแหน่ง | ระยะทางตรง | ถนนในการจราจร / เวลา |
|---|---|---|
| สถานที่ A | 3.32 กม. | 4.5 กม. / 15 นาที |
| สถานที่ตั้ง B | 3.20 กม. | 5.0 กม. / 17 นาที |
| สถานที่ตั้ง ค | 4.84 กม. | 6.9 กม. / 23 นาที |
แม้ว่าตำแหน่ง B จะอยู่ใกล้ที่สุด แต่เส้นทางและเวลาในการเดินทางไปยังตำแหน่งดังกล่าวจะนานกว่าเนื่องจากตำแหน่ง A เข้าถึงได้ด้วยทางหลวง
เมื่อส่งคำขอนี้แล้ว คุณจะประมวลผลการจับคู่เพื่อจัดเรียงคำตอบตาม ระยะเวลาในการขับรถได้ คุณดูตัวอย่างฟังก์ชันดังกล่าวได้ใน Codelab ของเครื่องมือระบุตำแหน่ง
แสดงเส้นทางในการนำทาง
| ตัวอย่างนี้ใช้ Routes Library, Maps JavaScript API | นอกจากนี้ยังมี Routes API บริการเว็บสำหรับใช้ใน Android และ iOS ไม่ว่าจะจากแอปพลิเคชันโดยตรงหรือจากระยะไกล ผ่านพร็อกซีเซิร์ฟเวอร์ |
การแสดงเส้นทางแก่ผู้ใช้จากภายในเว็บไซต์หรือแอปพลิเคชันหมายความว่าผู้ใช้ไม่จำเป็นต้องออกจากเว็บไซต์ของคุณ ซึ่งหมายความว่าผู้ใช้จะไม่ถูกรบกวนด้วยหน้าอื่นๆ หรือเห็นคู่แข่งบนแผนที่ นอกจากนี้ คุณยังใช้ Routes API เพื่อขอเส้นทางที่เป็นมิตรกับสิ่งแวดล้อมเพื่อประมาณการใช้เชื้อเพลิงหรือพลังงาน และแสดงผลกระทบต่อสิ่งแวดล้อมของการเดินทางได้ด้วย
คลาส Route
ใน Routes Library ของ Maps JavaScript API ยังมีเมธอดต่างๆ เช่น createPolylines()
และ createWaypointAdvancedMarkers() ที่ช่วยให้คุณประมวลผลผลลัพธ์และ
แสดงผลลัพธ์บนแผนที่ได้
ต่อไปนี้เป็นตัวอย่างการขอและแสดงเส้นทางบนแผนที่ ดูข้อมูลเพิ่มเติม เกี่ยวกับตัวอย่างได้ที่ รับเส้นทาง
ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ Maps เหล่านี้ได้ใน เอกสารประกอบของ Maps JavaScript API หรือดู Codelab แบบทีละขั้นตอนเพื่อสร้างเครื่องมือระบุตำแหน่ง
ช่วยให้ผู้ใช้จองการนัดหมายได้
เมื่อผู้ใช้ดูรายละเอียดสถานที่ในแผงด้านข้าง คุณสามารถเสนอความสะดวกในการจองการนัดหมายได้ด้วยการคลิกปุ่ม ดังที่แสดงในรูปต่อไปนี้
คุณเปิดใช้ฟีเจอร์นี้ได้หลายวิธี ได้แก่ (1) ใช้ โซลูชัน Quick Builder Locator Plus เพื่อมอบฟังก์ชันการทำงานนี้โดยไม่ต้องปรับแต่ง และ (2) ใช้ Business Profile ส่วนนี้จะอธิบายตัวเลือกเหล่านี้โดยละเอียด
ใช้เครื่องระบุตำแหน่ง Quick Builder Plus
คุณสามารถใช้ โซลูชัน Quick Builder Locator Plus เพื่อนําเข้ารายละเอียดทางธุรกิจจาก Business Profile ได้อย่างรวดเร็ว เมื่อนำเข้าลงในเครื่องมือ Quick Builder แล้ว คุณจะเปิดใช้ลิงก์การจองการนัดหมายที่ฝังไว้ (หากมี) สำหรับสถานที่ตั้งธุรกิจได้โดยใช้ จองกับ Google แม้ว่าจะไม่มี Business Profile ที่เชื่อมโยงกับบัญชี Google คุณก็ยังใช้ Quick Builder เพื่อฝังลิงก์การจองสำหรับธุรกิจที่คุณเปิดใช้กับผู้ให้บริการการจองบุคคลที่สาม ผ่าน จองกับ Google* ได้
*จองกับ Google เป็นฟีเจอร์ที่มีให้บริการสำหรับธุรกิจในบางประเทศ/ภูมิภาคเท่านั้น โดยจะทำงานร่วมกับผู้ให้บริการการจอง ที่รองรับ หากคุณสนใจใช้จองกับ Google แต่ไม่ได้ทำงานร่วมกับพาร์ทเนอร์ของจองกับ Google โปรดแนะนำให้ผู้ให้บริการของคุณแสดงความสนใจโดยกรอกแบบฟอร์มแสดงความสนใจนี้ และอ่านเอกสารประกอบ เพื่อดูวิธีเริ่มต้นใช้งาน หากยังไม่ได้จัดการการจองผ่านผู้ให้บริการการจอง คุณสามารถดูผู้ให้บริการที่มีสิทธิ์ได้ในส่วนการจองภายในตัวจัดการ Business Profile
ใช้ Business Profile เพื่อเปิดใช้การจองการนัดหมาย
เมื่อจัดการตัวตนบนโลกออนไลน์ด้วย Business Profile สถานที่ตั้งของธุรกิจ ที่คุณสร้างจะเชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform เพื่อเปิดใช้ ฟังก์ชันการทำงานของการทำแผนที่แบบผสานรวมกับข้อมูลธุรกิจ
Business Profile API ช่วยให้คุณสร้างการกระทํา เช่น การจองการนัดหมาย ซึ่งคุณสามารถดึงข้อมูล และแสดงในแอปได้ แต่ต้องทําตามขั้นตอนด้วยตนเองบางอย่างเพื่อเปิดใช้ ดังที่อธิบายไว้ด้านล่าง
เมื่อผู้ใช้ดูรายละเอียดสถานที่สำหรับสถานที่ตั้งของคุณในแผงด้านข้าง คุณจะ ระบุลิงก์เพื่อให้ผู้ใช้ทำการนัดหมายได้ ส่วนนี้จะอธิบายวิธีการ
-
สร้าง API ของ Business Profile
placeActionLinkสำหรับสถานที่ตั้งประเภทAPPOINTMENT,ONLINE_APPOINTMENTหรือDINING_RESERVATIONplaceActionLinkจะเป็นออบเจ็กต์ที่คุณใช้สำหรับลิงก์การนัดหมายในแผงด้านข้าง (หากสร้างลิงก์การดำเนินการนัดหมายที่ต้องการแล้ว ให้ข้ามไปยังขั้นตอนถัดไป) ต่อไปนี้คือตัวอย่างการตอบกลับจากการดำเนินการ POST ที่สำเร็จplaceActionLinks.create{ "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)ตัวอย่างต่อไปนี้แสดง APPOINTMENT
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 ช่วยให้คุณสร้างและดึงข้อมูล "โพสต์" (เช่น ข้อเสนอในสตรีม) ที่เชื่อมโยงกับสถานที่ตั้งของคุณได้ รูปภาพต่อไปนี้แสดงตัวอย่างข้อเสนอในร้านใน แผงด้านข้างของรายละเอียดสถานที่
(แผนภาพสถาปัตยกรรมในส่วนQuick Builder แสดงเทคโนโลยีที่พร้อมใช้งานสำหรับการเพิ่มข้อเสนอลงในเครื่องมือระบุตำแหน่ง)
เนื่องจากข้อเสนอในสตรีมจะเชื่อมโยงกับสถานที่ตั้ง คุณจึงต้องค้นหารหัสสถานที่ตั้งของ Business Profile ที่เชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform สำหรับสถานที่ตั้งที่ผู้ใช้กำลังดู
เมื่อมีรหัสสถานที่ตั้งของ Business Profile คุณจะดึงข้อเสนอที่เกี่ยวข้องเป็น
localPost เพื่อแสดงในแผงด้านข้างของรายละเอียดสถานที่ได้ มีขั้นตอนดังนี้
- ด้วย Google My Business API คุณจะ
สร้างโพสต์ข้อเสนอที่ต้องการ
แสดงประเภท
OFFERได้ -
ค้นหาสถานที่ตั้ง / รหัสสถานที่ตั้งของ Business Profile ที่เชื่อมโยงกับรหัสสถานที่ในแผนที่
เมื่อผู้ใช้ดูรายละเอียดสถานที่ ก็จะเห็นรายละเอียดสำหรับรหัสสถานที่ของ Google Maps Platform รหัสสถานที่เชื่อมโยงกับรหัสสถานที่ตั้งของ Business Profile ดังนั้นคุณต้อง ค้นหารหัสสถานที่ตั้งตามรหัสสถานที่ในแผนที่เพื่อดึงและแสดง ลิงก์ข้อเสนอในพื้นที่สำหรับสถานที่ตั้งของคุณ เรียกใช้ Business Profile API ต่อไปนี้
- แสดงรายการบัญชีของโปรเจ็กต์
- แสดงรายการ สถานที่ตั้งทั้งหมดภายในบัญชี
- ในสถานที่ตั้งของบัญชี
LocationKeyจะมีรหัสสถานที่ของ Maps ซึ่งคุณสามารถเปรียบเทียบกับรหัสสถานที่ของสถานที่ตั้งที่กำลัง ดูอยู่
ต่อไปนี้คือตัวอย่างคำขอรายละเอียดของสถานที่ตั้งใน 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
การปรับแต่งแผนที่
คุณเปลี่ยนลักษณะและรายละเอียดของแผนที่ได้หลายวิธี ตัวอย่างเช่น คุณจะดำเนินการต่อไปนี้ได้
- สร้างเครื่องหมายที่กำหนดเองเพื่อแทนที่หมุดในแผนที่เริ่มต้น
- เปลี่ยนสีของฟีเจอร์แผนที่ให้สอดคล้องกับแบรนด์
- ควบคุมจุดที่น่าสนใจที่คุณแสดง (สถานที่ท่องเที่ยว อาหาร ที่พัก และอื่นๆ) และระดับความหนาแน่น ซึ่งช่วยให้คุณมุ่งเน้นความสนใจของผู้ใช้ไปยังสถานที่ตั้งของคุณในขณะที่ไฮไลต์ สถานที่สำคัญที่ช่วยให้ผู้ใช้ไปยังสถานที่ที่ใกล้ที่สุดได้
การสร้างเครื่องหมายบนแผนที่แบบกำหนดเอง
คุณปรับแต่งเครื่องหมายขั้นสูง ได้โดยเปลี่ยนพื้นหลัง หมุด ขอบ หรือสีสัญลักษณ์เริ่มต้น (เช่น เพื่อระบุว่า สถานที่เปิดอยู่หรือไม่) แทนที่เครื่องหมายด้วยรูปภาพกราฟิกที่กำหนดเอง เช่น โลโก้ของแบรนด์ หรือสร้างเครื่องหมาย HTML และ CSS ที่กำหนดเอง หน้าต่างข้อมูลจะให้ข้อมูลเพิ่มเติมแก่ผู้ใช้ได้ เช่น เวลาทำการ หมายเลขโทรศัพท์ หรือรูปภาพ
ต่อไปนี้เป็นแผนที่ตัวอย่างที่ใช้เครื่องหมายกราฟิกที่กำหนดเอง (ดูซอร์สโค้ดใน หัวข้อเครื่องหมายกราฟิกที่กำหนดเองของ 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>
โค้ดต่อไปนี้จะแสดงแผนที่ที่จัดรูปแบบในหน้าเว็บ (ไม่ได้แสดงคือองค์ประกอบ <div id="map"></div> ของ HTML
ซึ่งแผนที่จะปรากฏในหน้าเว็บ)
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 Locator Plus แดชบอร์ดข้อมูลวิเคราะห์จะช่วยคุณวิเคราะห์และสร้างข้อมูลเชิงลึก ซึ่งจะช่วยให้คุณเห็นภาพว่าผู้เข้าชมเว็บไซต์มีส่วนร่วมกับเครื่องมือระบุตำแหน่งร้านค้าได้ดีเพียงใด โดยอิงตามข้อมูลที่ไม่ระบุตัวตน
หากต้องการเข้าถึงรายงานนี้ ให้ไปที่ ส่วนรายงานการมีส่วนร่วมของคอนโซลระบบคลาวด์ ดูรายละเอียดเพิ่มเติมเกี่ยวกับรายงานนี้ได้ที่รายงานการมีส่วนร่วม
เนื่องจาก 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 เพื่อทำสิ่งต่อไปนี้
- ทริกเกอร์การโต้ตอบของผู้ใช้ เช่น การคลิก ซึ่งวัดแยกจากการดูหน้าเว็บของเว็บไซต์ได้ (เหตุการณ์)
- ดูข้อมูลดิบ (เมตริก) ในการจัดกลุ่มที่มีความหมาย (มิติข้อมูล หรือมิติข้อมูลที่กําหนดเอง)
การใช้เหตุการณ์ที่กำหนดเอง
ตัวอย่างการกําหนดเหตุการณ์ที่กําหนดเองในเครื่องมือระบุตําแหน่งมีดังนี้
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 ตัวอย่างเช่น เหตุการณ์ "location" ที่ตั้งค่าไว้ก่อนหน้านี้สําหรับ Place Autocomplete จะปรากฏใน Google Analytics ดังที่แสดงในรูปต่อไปนี้
หรือจะตรวจสอบเหตุการณ์แบบเรียลไทม์โดยใช้ DebugView ก็ได้ ดังที่แสดงใน รูปต่อไปนี้ โปรดทราบว่าคุณต้องรอ 24 ชั่วโมงก่อนจึงจะเข้าถึงรายงานเหตุการณ์ฉบับเต็มได้ในส่วนการมีส่วนร่วม > เหตุการณ์ของ Google Analytics
นอกจากนี้ คุณยังพัฒนากลยุทธ์และวัดผลเพื่อกระตุ้นการเข้าชมหน้าร้านจากแอปเครื่องมือระบุตำแหน่งได้ด้วย ตัวอย่างเช่น Google Analytics มีข้อเสนอการเข้าชมร้านค้า ใน Analytics ที่ลิงก์การเข้าชมร้านค้าจริง (วัดโดย Google Ads) กับข้อมูลวิเคราะห์เครื่องมือระบุตำแหน่ง นอกจากนี้ คุณยังสามารถพัฒนากลยุทธ์แอปไปยังสถานที่ตั้งของคุณเองได้ด้วย เช่น ข้อเสนอออนไลน์ที่แลกรับได้ที่สถานที่ตั้งจริง
เมตริก Business Profile
นอกเหนือจากการติดตามเหตุการณ์ เมตริก และมิติข้อมูลที่คุณสนใจด้วย Google Analytics แล้ว Business Profile ยังมีเมตริกของตัวเองด้วย เช่น หากเพิ่มลิงก์การจองการนัดหมายและข้อเสนอในพื้นที่ลงในเครื่องมือระบุตำแหน่ง คุณจะ ดูเมตริกเกี่ยวกับการดูและการคลิกเหล่านั้นได้
คำขอตัวอย่างต่อไปนี้ไปยัง 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"
}
}
]
}
]
}
การตอบกลับจะมีเมตริกต่างๆ โดยเฉพาะอย่างยิ่งเมตริกต่อไปนี้
- ดูสถานที่ใน Google Maps 1,571 ครั้ง
- ยอดดูสถานที่ 631 ครั้งใน Google Search
- คำขอเส้นทางการขับขี่ไปยังสถานที่ตั้ง 3 รายการ
- การคลิกข้อเสนอ 42 ครั้ง
LOCAL_POST_ACTIONS_CALL_TO_ACTION - มุมมอง 11 แบบของโพสต์ใน Google Search
ตัวเลือกเมตริกอีกอย่างคือการใช้ จองกับ 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 ต่อไปนี้ โดยมีชื่อสถานที่ที่เข้ารหัส 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 ที่ไคลเอ็นต์ตรวจหาได้ คุณสามารถใช้ตำแหน่งทางภูมิศาสตร์เป็นกลไกสำรองในการระบุ ตำแหน่งของผู้ใช้ หรือใช้เพื่อตรวจสอบตำแหน่งที่อุปกรณ์รายงานอีกครั้ง
การรวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่
ในส่วนการระบุรายละเอียดสถานที่ก่อนหน้านี้ เราได้กล่าวถึงการใช้รายละเอียดสถานที่เพื่อให้ผู้ใช้ได้รับข้อมูล เกี่ยวกับสถานที่ตั้งของคุณอย่างครบถ้วน เช่น เวลาทำการ รูปภาพ และรีวิว
การทำความเข้าใจระดับราคาและ SKU ของฟิลด์ข้อมูลต่างๆ ใน Places API (ใหม่) จะเป็นประโยชน์ กลยุทธ์หนึ่งในการจัดการต้นทุนคือการรวมข้อมูลที่คุณมีอยู่แล้วเกี่ยวกับ สถานที่ตั้งของคุณเข้ากับข้อมูลล่าสุดจาก Google Maps เช่น การปิดชั่วคราว เวลาทำการในวันหยุด และการให้คะแนน รูปภาพ และรีวิวของผู้ใช้ หากมีข้อมูลติดต่อของสถานที่ตั้งอยู่แล้ว คุณก็ไม่จำเป็นต้องขอฟิลด์เหล่านั้นจากรายละเอียดสถานที่ และสามารถจำกัดมาสก์ฟิลด์เพื่อดึงเฉพาะฟิลด์ที่ต้องการแสดงได้
คุณอาจมีข้อมูลสถานที่ของคุณเองเพื่อเสริมหรือใช้แทน รายละเอียดสถานที่ Codelab สำหรับเครื่องมือระบุตำแหน่งแบบฟูลสแต็กมีตัวอย่างการใช้ GeoJSON กับฐานข้อมูล เพื่อจัดเก็บและดึงรายละเอียดตำแหน่งของคุณเอง