คู่มือการใช้งาน Locator Plus

ภาพรวม

เว็บ iOS API

Google Maps Platform พร้อมให้บริการสําหรับเว็บ (JS, TS), Android และ iOS และให้บริการ API ของบริการเว็บเพื่อรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทาง ตัวอย่างในคู่มือนี้เขียนขึ้นสําหรับแพลตฟอร์มหนึ่ง แต่ลิงก์เอกสารมีไว้เพื่อใช้งานบนแพลตฟอร์มอื่นๆ

สร้างเลย

เครื่องมือสร้างด่วน ใน Google Cloud Console ช่วยให้คุณสร้างตัวระบุตําแหน่งได้อย่างรวดเร็ว รวมถึงนําเข้า ข้อมูล Business Profile และฝังลิงก์การจองการนัดหมายจากผู้ให้บริการ บุคคลที่สามโดยอัตโนมัติ UI แบบอินเทอร์แอกทีฟช่วยให้คุณสร้างโค้ดและทําให้ใช้งานได้ใน Cloud ภายในไม่กี่นาที

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

Locator Plus คือเคล็ดลับและคําแนะนําในการปรับแต่งที่เรามอบให้ในหัวข้อนี้ ซึ่งเราแนะนําให้ใช้เป็นการผสมผสานที่ดีที่สุดจาก Google Maps Platform API เพื่อสร้างประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้เครื่องระบุตําแหน่ง การทําตามแนวทางปฏิบัติเหล่านี้ช่วยให้คุณช่วยให้ผู้ใช้เห็นตําแหน่งของคุณบนแผนที่ ดูข้อมูลโดยละเอียดประกอบการตัดสินใจ และขอเส้นทางได้ ไม่ว่าจะกําลังขับรถ ปั่นจักรยาน เดิน หรือต้องการใช้บริการขนส่งสาธารณะ

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

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

ด้านซ้ายของแผนภาพ เว็บเบราว์เซอร์จะแสดงแผนที่พร้อมป๊อปอัปรายละเอียดตําแหน่ง
              รายการ API ทางด้านขวาของแผนภาพคือรายการ API ที่มีฟังก์ชันการทํางานที่แตกต่างกัน ซึ่งได้แก่ ภาพแผนที่ JavaScript API สําหรับการแสดงตําแหน่งและเนื้อหา, การจัดรูปแบบแผนที่, เครื่องหมายบนแผนที่, Street View ที่กําหนดเอง และการแสดงเส้นทาง เติมข้อความอัตโนมัติเพื่อให้ที่อยู่เสร็จสมบูรณ์และมีฟังก์ชันการพิมพ์ล่วงหน้า Places และ Geocoding API สําหรับตําแหน่งที่อยู่ DISTANCE Matrix API เพื่อจัดอันดับตําแหน่งตามระยะทาง เวลา และโหมดการเดินทาง Directions API เพื่อแสดงเส้นทางโดยอิงตามเวลาเดินทางและโหมดการเดินทาง
              ตรงกลางของแผนภาพ ไอคอนพื้นที่เก็บข้อมูลที่แสดงข้อมูลตําแหน่งที่กําหนดเองชี้ขึ้นไปจนถึงไอคอนเว็บเซิร์ฟเวอร์ที่มีลูกศร 2 หัวซึ่งชี้ให้เห็นข้อมูลแบบอ่านและเขียนระหว่างเว็บเซิร์ฟเวอร์และที่เก็บข้อมูล ลูกศรระหว่างเว็บเบราว์เซอร์และ API จะผ่านเว็บเซิร์ฟเวอร์ที่เป็นตัวกลาง

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

การใช้ Quick Builder Locator Plus

คุณใช้โซลูชัน Quick Builder Locator Plus เพื่อนําเข้ารายละเอียดธุรกิจจาก Business Profile ได้ ตอนนี้การเปลี่ยนแปลงรายละเอียดธุรกิจของ Business Profile จึงจะแสดงในเครื่องระบุตําแหน่งร้านในเว็บไซต์ของคุณ การเปลี่ยนแปลงเหล่านี้อาจรวมถึงเวลาทําการ ข้อมูลติดต่อ รูปภาพ ตัวเลือกบริการ และอื่นๆ เครื่องมือสร้างด่วนจะช่วยให้คุณสํารวจการตั้งค่าที่ตั้งธุรกิจบนแผนที่ได้อย่างรวดเร็ว สร้างรหัสที่ทําให้ใช้งานได้แล้ว หรือทําให้ใช้งานได้โดยตรงใน Google Cloud Storage ภายในไม่กี่นาที

การผสานรวม Business Profile
จัดการสถานที่ตั้งใน Locator Plus ได้ง่ายๆ โดย นําเข้ารายละเอียดธุรกิจจาก Business Profile

ทําให้ใช้งานได้กับระบบคลาวด์
ใช้โซลูชัน Locator Plus ได้ง่ายๆ โดยใช้ Google Cloud

การใช้แผนที่แบบไดนามิกของคุณเอง

ตัวอย่างนี้ใช้ 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 อ้างอิงฟังก์ชัน JavaScript initMap ที่เรียกใช้เมื่อโหลดหน้าเว็บ ใน URL คุณยังกําหนดภาษาหรือภูมิภาคของแผนที่เพื่อให้มั่นใจว่ารูปแบบที่ถูกต้องของการกําหนดเป้าหมายตามประเทศนั้นถูกต้อง การตั้งค่าภูมิภาคยังช่วยรับประกันได้ว่าลักษณะการทํางานของแอปที่ใช้นอกสหรัฐอเมริกาจะมีอคติต่อภูมิภาคที่คุณตั้งค่าไว้ ดูรายละเอียดการครอบคลุมของ Google Maps Platform เพื่อดูรายการภาษาและภูมิภาคที่รองรับทั้งหมด และดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานพารามิเตอร์ region

ถัดไปคุณต้องมี HTML div เพื่อวางแผนที่ในหน้าเว็บ นี่คือตําแหน่งที่จะแสดงแผนที่

<div id="map"></div>

ขั้นตอนถัดไปคือการตั้งค่าฟังก์ชันพื้นฐานของแผนที่ โดยจะดําเนินการในฟังก์ชันสคริปต์ initMap ที่ระบุใน URL ของสคริปต์ ในสคริปต์นี้ ดังที่แสดงในตัวอย่างต่อไปนี้ คุณสามารถตั้งค่าตําแหน่งเริ่มต้น ประเภทแผนที่ และการควบคุมซึ่งจะมีให้ใช้งานบนแผนที่สําหรับผู้ใช้ของคุณ สังเกตว่า getElementById() อ้างอิงรหัส "map" 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 Search และขอเฉพาะช่อง place_id ต่อไปนี้คือตัวอย่างการขอรหัสสถานที่ของสํานักงาน Google London

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 London

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);

คุณสามารถใช้เครื่องหมาย 2-3 อันเพื่อดูตําแหน่งของสถานที่หลายแห่งร่วมกันได้

หากมีสถานที่หลายแห่ง คุณอาจพิจารณาใช้ยูทิลิตีการจัดกลุ่มเครื่องหมายสําหรับ JavaScript, Android หรือ iOS ด้านล่างนี้เป็นตัวอย่างของการจัดกลุ่มเครื่องหมายในตัวอย่างเครื่องระบุตําแหน่ง GitG ของ JavaScript

การให้รายละเอียดสถานที่

ตัวอย่างนี้ใช้ Maps JavaScript API นอกจากนี้ยังมี: API | Android | iOS

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

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

ขยายเพื่อดูวิดีโอส่งคําขอรายละเอียดสถานที่:

ดูเวลาเปิดทําการ

ตรวจสอบการปิดถนน

ควบคุมค่าใช้จ่าย

ตัวอย่างต่อไปนี้ใช้ Places Places, 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 โดยตรงได้ด้วย

การเพิ่มไลบรารี Place Autocomplete ลงในเว็บไซต์เป็นเพียงการเพิ่มพารามิเตอร์การค้นหา 2-3 รายการลงใน URL ของสคริปต์ JavaScript ใน Maps ในตัวอย่างต่อไปนี้ ให้เพิ่ม 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 นอกจากนี้ยังมี บริการเมทริกซ์ระยะทาง, Maps JavaScript API

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

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

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

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

ตัวอย่างต่อไปนี้เรียกบริการเมทริกซ์ระยะทางซึ่งระบุต้นทางของผู้ใช้และ #39 ตัวอย่างนี้แสดงระยะทางจากศูนย์แผนที่ไปยังสํานักงาน Google 3 แห่งในลอนดอน

ข้อมูลอ้างอิงด่วนของการเข้ารหัส 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 สีแดง) และปลายทางบนแผนที่:

รูปภาพแสดงแผนที่เมืองพร้อมกับตําแหน่งของผู้ใช้เป็นเครื่องหมายสีแดง
               และสถานที่ตั้งที่ล้อมรอบเป็นเครื่องหมายสีเขียว

ระยะทางเป็นเส้นตรงและระยะทางของเส้นทางมักแตกต่างกันดังที่แสดงในตารางต่อไปนี้

สถานที่ตั้ง ระยะห่างตรง ถนนในการจราจร / เวลา
สถานที่ ก 3.32 กม. 4.5 กม./15 นาที
สถานที่ ข 3.20 กม. 5.0 กม. / 17 นาที
ตําแหน่ง C 4.84 กม. 6.9 กม. / 23 นาที

แม้ว่าสถานที่ตั้ง B จะใกล้ที่สุดโดยใช้ระยะทาง แต่เส้นทางและเวลาที่ใช้เดินทางก็นานกว่าเพราะมีทางหลวง A

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

ตัวอย่างนี้ใช้ บริการเส้นทางของ JavaScript JavaScript API นอกจากนี้: บริการเว็บ Directions API สําหรับการใช้งานบน Android และ iOS ไม่ว่าจะเป็นแอปพลิเคชันโดยตรงหรือจากพร็อกซีเซิร์ฟเวอร์จากระยะไกล

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

นอกจากนี้ บริการเส้นทางยังมีฟังก์ชันที่ให้คุณประมวลผลผลการค้นหาและแสดงบนแผนที่ได้ง่ายๆ

ตัวอย่างการแสดงแผงเส้นทางมีดังต่อไปนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอย่างได้ที่การแสดงเส้นทางข้อความ

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ต่างๆ ของ Maps เหล่านี้ โปรดอ่านเอกสารประกอบของ Maps JavaScript API หรือดูที่โค้ด Codes แบบทีละขั้นตอนเพื่อสร้างเครื่องระบุตําแหน่ง

ช่วยผู้ใช้จองการนัดหมาย

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

การเปิดใช้ฟีเจอร์นี้มีหลายวิธี ดังนี้ (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" แต่ปัจจุบันไม่ได้ร่วมงานกับพาร์ทเนอร์ "จองกับ Google" โปรดติดต่อผู้ให้บริการเพื่อแสดงความสนใจในการเข้าร่วมโดยกรอกแบบฟอร์มนี้ และตรวจสอบเอกสารประกอบของเราเพื่อดูว่าจะเริ่มต้นใช้งานได้อย่างไร หากคุณยังไม่ได้ทํางานร่วมกับผู้ให้บริการการจอง คุณจะเห็นผู้ให้บริการที่มีสิทธิ์ในส่วนการจองภายในตัวจัดการ Business Profile

การใช้ Business Profile เพื่อเปิดใช้การจองการนัดหมาย

เมื่อคุณจัดการตัวตนในโลกออนไลน์ด้วย Business Profile ที่ตั้งธุรกิจที่คุณสร้างจะเชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform เพื่อเปิดใช้ฟังก์ชันการผสานรวมที่ผสานรวมเข้ากับข้อมูลธุรกิจ

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

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

  1. สร้าง Business Profile API placeActionLink สําหรับสถานที่ประเภท APPOINTMENT, ONLINE_APPOINTMENT หรือ DINING_RESERVATION placeActionLink จะเป็นออบเจ็กต์ที่คุณใช้สําหรับลิงก์การนัดหมายในแผงด้านข้าง (หากคุณสร้างลิงก์การดําเนินการนัดหมาย ที่ต้องการแล้ว ให้ข้ามไปยังขั้นตอนถัดไป) ตัวอย่างการตอบกลับจากการดําเนินการ 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"
    }
    
  2. หาสถานที่ตั้งใน Business Profile ที่เชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform

    เมื่อผู้ใช้ดูรายละเอียดสถานที่ ก็จะเห็นรายละเอียดของรหัสสถานที่ของ Google Maps Platform รหัสสถานที่จะเชื่อมโยงกับรหัสสถานที่ตั้งของ Business Profile คุณจึงต้องค้นหารหัสสถานที่ตั้งตามรหัสสถานที่ในแผนที่เพื่อเรียกข้อมูลและแสดงลิงก์การจองการนัดหมายที่คุณสร้างไว้ เรียกใช้ Business Profile API ต่อไปนี้

    1. แสดงรายชื่อบัญชีของโปรเจ็กต์
    2. แสดงสถานที่ตั้งทั้งหมด ภายในบัญชี
    3. ในตําแหน่งของบัญชี LocationKey มีรหัสสถานที่ของ Google Maps Platform ซึ่งคุณสามารถเปรียบเทียบกับรหัสสถานที่ของสถานที่ที่กําลังดูอยู่ได้
  3. คุณใช้รหัสสถานที่ตั้งเพื่อรับลิงก์การดําเนินการที่ต้องการได้ หากต้องการเรียกข้อมูล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"
           }
       ]
     }
  4. สร้าง <div> ในแผงด้านข้างด้วยข้อมูลที่เกี่ยวข้องจากออบเจ็กต์ placeActionLink โดยเฉพาะ URI สําหรับลิงก์การจองการนัดหมาย

วิธีอื่นๆ ในการเพิ่มลิงก์การนัดหมาย

หากคุณไม่ได้จัดการ Business Profile หรือไม่ต้องการใช้โซลูชัน Quick Builder Locator Plus ให้ตรวจสอบแพลตฟอร์มการจองการนัดหมายเพื่อดูการฝังวิดเจ็ตการจองลงในเว็บไซต์หรือแอป ตัวเลือกอื่นๆ ที่ใช้ Google Cloud เช่น Cloud Spanner สําหรับการจัดการพื้นที่โฆษณา (วิดีโอ)

การแสดงข้อเสนอในพื้นที่

ในแผงด้านข้าง "รายละเอียดสถานที่" ของสถานที่ คุณจะแสดงข้อเสนอในพื้นที่เพื่อให้ผู้ใช้คลิกได้ Google My Business API ช่วยให้คุณสร้างและเรียกข้อมูล "post" (เช่น ข้อเสนอในร้าน) ที่เชื่อมโยงกับสถานที่ตั้งของคุณได้ รูปต่อไปนี้แสดงตัวอย่างของข้อเสนอในพื้นที่ในแผงด้านข้างของรายละเอียดสถานที่

(แผนภาพสถาปัตยกรรมในส่วนก่อนหน้านี้ แสดงเทคโนโลยีที่ใช้ได้สําหรับการเพิ่มข้อเสนอลงในตัวระบุตําแหน่ง)

เนื่องจากข้อเสนอในร้านเชื่อมโยงกับสถานที่ คุณจึงต้องค้นหารหัสสถานที่ตั้ง Business Profile ที่เชื่อมโยงกับรหัสสถานที่ของ Google Maps Platform สําหรับสถานที่ที่ผู้ใช้กําลังดูอยู่ เมื่อมีรหัสสถานที่ตั้งของ Business Profile คุณจะดึงข้อมูลข้อเสนอที่เกี่ยวข้องเป็น localPost เพื่อแสดงในแผงด้านข้างของรายละเอียดสถานที่ได้ มีขั้นตอนดังนี้

  1. เมื่อใช้ Google My Business API ให้สร้างโพสต์ข้อเสนอที่ต้องการแสดงซึ่งเป็นประเภท OFFER
  2. ค้นหาสถานที่ / รหัสสถานที่ตั้งของ Business Profile ที่เชื่อมโยงกับรหัสสถานที่ในแผนที่

    เมื่อผู้ใช้ดูรายละเอียดสถานที่ ก็จะดูรายละเอียดของรหัสสถานที่ของ Google Maps Platform รหัสสถานที่เชื่อมโยงกับรหัสสถานที่ตั้งของ Business Profile คุณจึงต้องค้นหารหัสสถานที่ตั้งตามรหัสสถานที่ในแผนที่เพื่อเรียกและแสดงลิงก์ข้อเสนอในร้านสําหรับสถานที่ตั้งของคุณ เรียกใช้ Business Profile API ต่อไปนี้

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

    ตัวอย่างคําขอรายละเอียดตําแหน่งใน API ของ Business Profile มีดังนี้

    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"
        }
    }
          
  3. เมื่อคุณมีรหัสสถานที่ตั้งแล้ว คุณจะได้รับข้อเสนอที่ต้องการ หากต้องการเรียกข้อมูลโพสต์ข้อเสนอที่มีอยู่ ให้ระบุ localPosts ที่มีอยู่สําหรับสถานที่ตั้งนั้น และกรอง topicType จาก OFFER เพื่อค้นหาเนื้อหาของข้อเสนอที่ต้องการใช้

    ต่อไปนี้เป็นตัวอย่างคําขอแสดงรายการโพสต์ในพื้นที่ของสถานที่หนึ่งๆ

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

    ตัวอย่างต่อไปนี้แสดง OFFER localPost ในการตอบกลับ

    ขยายเพื่อดูตัวอย่างคําตอบ

    {
        "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."
                }
            },
        ],
    }
            
  4. สร้าง <div> ในแผงด้านข้างโดยใช้ข้อมูลที่เกี่ยวข้องจากออบเจ็กต์ localPost

การปรับแต่งแผนที่ของคุณ

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

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

การสร้างเครื่องหมายบนแผนที่ที่กําหนดเอง

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

ต่อไปนี้เป็นตัวอย่างแผนที่ที่ใช้ตัวทําเครื่องหมายที่กําหนดเอง (ดูซอร์สโค้ดในหัวข้อเครื่องหมายแบบกําหนดเองของ Maps JavaScript API)

โปรดดูข้อมูลโดยละเอียดในเอกสารประกอบเกี่ยวกับเครื่องหมายสําหรับ JavaScript (เว็บ), Android และ iOS

การจัดรูปแบบแผนที่

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

คุณสร้างหรือแก้ไขรูปแบบแผนที่ได้ในหน้ารูปแบบแผนที่ของ Google Cloud Console ในโปรเจ็กต์

ขยายเพื่อดูภาพเคลื่อนไหวของการสร้างรูปแบบและการจัดรูปแบบแผนที่ใน Cloud Console:

รูปแบบแผนที่อุตสาหกรรม

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

ในหน้ารูปแบบแผนที่ ให้คลิกเมาส์เพื่อสร้างรูปแบบแผนที่ใหม่ ในหน้า &quot;รูปแบบแผนที่ใหม่&quot; เมาส์จะคลิกปุ่มตัวเลือกที่อยู่ถัดจากรูปแบบการเพิ่มประสิทธิภาพอุตสาหกรรมแต่ละรูปแบบต่อไปนี้ ได้แก่ การเดินทาง โลจิสติกส์ อสังหาริมทรัพย์ และค้าปลีก เมื่อมีการคลิกแต่ละปุ่ม คําอธิบายรูปแบบแผนที่และตัวอย่างกราฟิกจะเปลี่ยนแปลง

จุดควบคุมความสนใจ

ภาพเคลื่อนไหวนี้กําหนดสีของเครื่องหมายสําหรับจุดสนใจ และเพิ่มความหนาแน่นของจุดที่น่าสนใจในรูปแบบแผนที่ ยิ่งความหนาแน่นสูง เครื่องหมาย POI ยิ่งปรากฏในแผนที่มาก

ในหน้ารูปแบบแผนที่ ให้คลิกเมาส์เพื่อสร้างรูปแบบแผนที่ใหม่ ระบบจะเลือกปุ่มตัวเลือก Google Maps
 ในหน้า &quot;รูปแบบแผนที่ใหม่&quot; ในส่วน &quot;สร้างรูปแบบของคุณเอง&quot; เมาส์คลิกปุ่มตัวเลือก Atlas สําหรับสไตล์ Atlas แล้วคลิกเปิดในตัวแก้ไขรูปแบบ ที่ตัวแก้ไขรูปแบบ เมาส์คลิก
                จุดสนใจนั้น แล้วคลิกองค์ประกอบไอคอน
                ซึ่งตั้งค่าสีเป็นสีแดง จากนั้นเมาส์จะเลือกช่องทําเครื่องหมายความหนาแน่นของจุดที่น่าสนใจ และเลื่อนตัวควบคุมความหนาแน่นไปทางขวาเพื่อความหนาแน่นสูงสุด เครื่องหมายสีแดงจํานวนมากขึ้น
                จะปรากฏบนตัวอย่างแผนที่เมื่อความหนาแน่นเพิ่มขึ้น จากนั้นเมาส์จะไปที่ปุ่มบันทึก

รูปแบบแผนที่แต่ละรูปแบบจะมีรหัสของตัวเอง หลังจากที่เผยแพร่รูปแบบใน 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 Plus

Locator Plus Analytics
หน้าแดชบอร์ดข้อมูลวิเคราะห์เครื่องระบุตําแหน่งร้านจะแสดงเมตริกประสิทธิภาพ

หากต้องการเข้าถึงรายงานนี้ ให้ไปที่ส่วนรายงานการมีส่วนร่วมของ 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 ในการดําเนินการต่อไปนี้

การใช้เหตุการณ์ที่กําหนดเอง

ต่อไปนี้เป็นตัวอย่างการกําหนดเหตุการณ์ที่กําหนดเองในเครื่องระบุตําแหน่ง

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" ที่ตั้งค่าไว้ก่อนหน้านี้สําหรับการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่จะปรากฏใน 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"
                   }
               }
           ]
       }
   ]
}

การตอบกลับมีเมตริกที่เห็นได้ชัดที่สุด ได้แก่

  • ยอดดูสถานที่ 1,571 ครั้งใน Google Maps
  • ยอดดูสถานที่ 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 เพื่อเดินทางไปสถานที่ตั้งจริงของคุณ


การปรับปรุงเครื่องระบุตําแหน่งพลัส

คุณสามารถยกระดับประสบการณ์ของผู้ใช้ให้ดีขึ้นได้ ทั้งนี้ขึ้นอยู่กับธุรกิจของคุณ&#39 หรือผู้ใช้'

กําลังส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่

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

ใช้ 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 นี้ เราแนะนําให้ใช้แอปพลิเคชันของบุคคลที่สาม เช่น wilio หากใช้ App Engine คุณจะใช้บริษัทบุคคลที่สามเพื่อส่งข้อความ SMS หรืออีเมลได้ ดูข้อมูลเพิ่มเติมได้ในการส่งข้อความด้วยบริการของบุคคลที่สาม

แสดง Street View เพื่อช่วยให้ผู้ใช้เห็นภาพตําแหน่ง

สําหรับสถานที่หลายแห่งในโลก สามารถใช้ Street View เพื่อแสดงภาพภายนอกสถานที่ได้ ซึ่งช่วยให้ผู้ใช้เห็นภาพของสถานที่ก่อนที่จะไปถึง คุณให้ Street View เป็นรูปแบบอินเทอร์แอกทีฟ (เว็บ) หรือแบบคงที่ (API) ได้ โดยขึ้นอยู่กับว่าคุณต้องการให้ผู้ใช้ "มองรอบๆ&เครื่องหมายคําพูด; เป็นพื้นที่ 360 องศาหรือไม่ Street View ยังใช้ได้กับ Android และ iOS อีกด้วย

การกําหนดสถานที่ตั้งของผู้ใช้ด้วยตําแหน่งทางภูมิศาสตร์

ในกรณีส่วนใหญ่ คุณจะระบุตําแหน่งของผู้ใช้ได้โดยใช้บริการตําแหน่งในอุปกรณ์หรือเบราว์เซอร์ของผู้ใช้ เราแสดงตัวอย่างของการใช้ตําแหน่งทางภูมิศาสตร์แบบ HTML5 ของในเบราว์เซอร์เพื่อแสดงตําแหน่งทางภูมิศาสตร์ของผู้ใช้หรืออุปกรณ์ใน Google Maps ตลอดจนเอกสารประกอบเกี่ยวกับการขอสิทธิ์และการรับข้อมูลตําแหน่งใน Android และ iOS อย่างไรก็ตาม อาจมีบางสถานการณ์ที่คุณต้องการเครื่องมือค้นหาตําแหน่งทางเลือก เช่น หากมีการปิดใช้บริการตําแหน่งของอุปกรณ์ หรือคุณมีข้อกังวลเกี่ยวกับตําแหน่งที่จะปลอมแปลงตําแหน่งอุปกรณ์

Geolocation API คือ API ฝั่งเซิร์ฟเวอร์ที่แสดงตําแหน่งและรัศมีความแม่นยําโดยอิงตามข้อมูลเกี่ยวกับเสาสัญญาณมือถือและโหนด Wi-Fi ที่ไคลเอ็นต์ตรวจจับได้ คุณสามารถใช้ตําแหน่งทางภูมิศาสตร์เป็นกลไกสํารองในการกําหนด ตําแหน่งของผู้ใช้ หรือจะใช้สําหรับตรวจสอบตําแหน่งที่รายงานโดยอุปกรณ์ก็ได้

การรวมข้อมูลตําแหน่งที่กําหนดเองเข้ากับรายละเอียดสถานที่

ในส่วนให้รายละเอียดสถานที่ก่อนหน้านี้ เราพูดถึงการใช้รายละเอียดสถานที่เพื่อให้ผู้ใช้ทราบข้อมูลอย่างละเอียดเกี่ยวกับสถานที่ต่างๆ เช่น เวลาทําการ รูปภาพ และรีวิว

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

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