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

ภาพรวม

เว็บ iOS API

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 ที่มีฟังก์ชันการทำงานต่างๆ ดังนี้ Maps JavaScript API สำหรับการแสดงภาพและการแสดงเนื้อหาของสถานที่ตั้ง การจัดรูปแบบแผนที่ เครื่องหมายแผนที่, Street View ที่กำหนดเอง และการแสดงเส้นทาง Place Autocomplete สำหรับ ฟังก์ชันการเติมที่อยู่และการพิมพ์ล่วงหน้า Places API และ Geocoding API สำหรับ ตำแหน่งที่อยู่ Distance Matrix API เพื่อจัดอันดับสถานที่ตามระยะทาง เวลา และ โหมดการเดินทาง Directions API เพื่อแสดงเส้นทางตามระยะเวลาเดินทางและโหมดการเดินทาง ตรงกลางของแผนภาพคือไอคอนที่เก็บข้อมูลซึ่งแสดงจุดข้อมูลตำแหน่งที่กำหนดเอง จนถึงไอคอนเว็บเซิร์ฟเวอร์ที่มีลูกศร 2 หัวซึ่งระบุการอ่านและการเขียนข้อมูล ระหว่างเว็บเซิร์ฟเวอร์กับที่เก็บข้อมูล ลูกศรระหว่างเว็บเบราว์เซอร์ และ API จะผ่านเว็บเซิร์ฟเวอร์ในฐานะตัวกลาง

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

การแสดงตำแหน่งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ

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

คุณเปิดใช้ฟีเจอร์นี้ได้หลายวิธี ได้แก่ (1) ใช้ โซลูชัน Quick Builder Locator Plus เพื่อมอบฟังก์ชันการทำงานนี้แบบพร้อมใช้งาน และ (2) ใช้การติดตั้งใช้งานแผนที่แบบไดนามิกของคุณเอง ส่วนนี้จะอธิบายตัวเลือกเหล่านี้โดยละเอียด

การใช้ Quick Builder Locator Plus

คุณสามารถใช้ โซลูชัน Quick Builder Locator Plus เพื่อนําเข้ารายละเอียดทางธุรกิจจาก Business Profile ดังนั้นตอนนี้การเปลี่ยนแปลงรายละเอียดธุรกิจของ Business Profile จะแสดงในเครื่องมือระบุตำแหน่งร้านค้าบนเว็บไซต์ การเปลี่ยนแปลงเหล่านี้อาจรวมถึงเวลาทำการ ข้อมูลติดต่อ รูปภาพ ตัวเลือกบริการ และอื่นๆ Quick Builder ช่วยให้คุณสำรวจการตั้งค่าสถานที่ตั้งของธุรกิจบนแผนที่ สร้างโค้ดที่พร้อมใช้งาน หรือติดตั้งใช้งานโดยตรงใน 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 คุณยังกำหนด ภาษาหรือภูมิภาคของแผนที่เพื่อให้แน่ใจว่ามีการจัดรูปแบบอย่างถูกต้องสำหรับ ประเทศที่เฉพาะเจาะจงที่คุณกำหนดเป้าหมายได้ด้วย การตั้งค่าภูมิภาคยังช่วยให้มั่นใจได้ว่าลักษณะการทำงานของ แอปที่ใช้นอกสหรัฐอเมริกาจะเอนเอียงไปทางภูมิภาคที่คุณตั้งค่า ดูรายการภาษาและภูมิภาคที่รองรับทั้งหมด รวมถึงดูข้อมูลเพิ่มเติมเกี่ยวกับ region การใช้พารามิเตอร์ได้ที่ รายละเอียดความครอบคลุมของ Google Maps Platform

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

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

ขั้นตอนถัดไปคือการตั้งค่าฟังก์ชันพื้นฐานของแผนที่ โดยจะทำใน initMap ฟังก์ชันสคริปต์ที่ระบุใน URL ของสคริปต์ ในสคริปต์นี้ ซึ่งแสดงในตัวอย่างต่อไปนี้ คุณสามารถตั้งค่าตำแหน่งเริ่มต้น ประเภทของแผนที่ และ ตัวควบคุมที่จะพร้อมใช้งานในแผนที่สำหรับผู้ใช้ โปรดทราบว่า getElementById() อ้างอิงรหัส "แผนที่" div ด้านบน 

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    zoomControl: false
  });
}

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

การรับรหัสสถานที่

ตัวอย่างนี้ใช้ Places API นอกจากนี้ยังมี JavaScript

คุณอาจมีฐานข้อมูลของสถานที่ตั้งที่มีข้อมูลพื้นฐาน เช่น ชื่อของสถานที่ตั้ง ที่อยู่ และหมายเลขโทรศัพท์ หากต้องการดึงข้อมูลที่ Google Maps Platform มีเกี่ยวกับสถานที่นั้น ซึ่งรวมถึงพิกัดทางภูมิศาสตร์และข้อมูลที่ผู้ใช้มีส่วนร่วม ให้ค้นหารหัสสถานที่ที่สอดคล้องกับสถานที่แต่ละแห่งในฐานข้อมูล คุณ โทรไปยัง ปลายทาง Find Place ในการค้นหาสถานที่ของ Places API และขอเฉพาะฟิลด์ place_id ได้ ตัวอย่างการขอรหัสสถานที่ของสำนักงาน Google ในลอนดอนมีดังนี้ 

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

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

การเข้ารหัสพิกัดภูมิศาสตร์ของสถานที่ตั้ง

ตัวอย่างนี้ใช้ Geocoding API นอกจากนี้ยังมี JavaScript

หากฐานข้อมูลสถานที่ตั้งมีที่อยู่ แต่ไม่มีพิกัดทางภูมิศาสตร์ ให้ใช้ Geocoding API เพื่อรับละติจูดและลองจิจูดของที่อยู่นั้นเพื่อวัตถุประสงค์ในการวางเครื่องหมายบนแผนที่ คุณสามารถเข้ารหัสพิกัดภูมิศาสตร์ของที่อยู่ในฝั่งเซิร์ฟเวอร์ จัดเก็บละติจูดและลองจิจูดในฐานข้อมูล และ รีเฟรช อย่างน้อยทุกๆ 30 วัน

ต่อไปนี้คือตัวอย่างการใช้ Geocoding API เพื่อรับ ละติจูดและลองจิจูดของรหัสสถานที่ที่ส่งคืนสำหรับสำนักงาน Google ในลอนดอน 

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

การเพิ่มสถานที่ลงในแผนที่

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

เมื่อได้ละติจูดและลองจิจูดของตำแหน่งแล้ว ตัวอย่างการเพิ่มตัวทำเครื่องหมายลงในแผนที่มีดังนี้

var marker = new google.maps.Marker({
    position: { lat: 51.493073, lng: -0.146550 },
    label:"A",
    title:"Location Name"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

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

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

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

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

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

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

ขยายเพื่อดูวิดีโอสำหรับขอรายละเอียดสถานที่

รับเวลาทำการ

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

ควบคุมต้นทุน

ตัวอย่างต่อไปนี้ใช้ Places Library, 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 ของสคริปต์ Maps JavaScript API ในตัวอย่างต่อไปนี้ การบวกคือ libraries=places 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>

จากนั้นเพิ่มกล่องข้อความในหน้าเว็บสำหรับข้อมูลจากผู้ใช้ 

<input id="autocomplete" placeholder="Enter starting
      address, city, or zip code" type="text"></input>

สุดท้ายนี้ คุณต้องเริ่มต้นบริการ Place Autocomplete และลิงก์กับกล่องข้อความที่มีชื่อ การจำกัด การคาดคะเน Place Autocomplete ให้เป็นประเภทการเข้ารหัสพิกัดภูมิศาสตร์จะกำหนดค่าช่องป้อนข้อมูล ให้ยอมรับที่อยู่ ถนน ย่าน เมือง และรหัสไปรษณีย์ เพื่อให้ผู้ใช้ป้อนข้อมูลได้ทุกระดับ เพื่ออธิบายต้นทาง อย่าลืมขอฟิลด์ 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 ซึ่งอธิบายไว้ในหัวข้อชั้นข้อมูล

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

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

ตัวอย่างต่อไปนี้เรียกใช้ Distance Matrix Service โดยระบุต้นทางของผู้ใช้และสถานที่ตั้ง ตัวอย่างนี้แสดง ระยะทางจากกึ่งกลางแผนที่ไปยังสำนักงาน 3 แห่งของ Google ในลอนดอน

ข้อมูลอ้างอิงแบบย่อสำหรับการเข้ารหัส URL: %2C = , (คอมมา), %3A = : (โคลอน) และ %7C = | (ไปป์) 

      https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
      &destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
      &units=metric
      &mode=driving
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_locatorplus_v2_a

นี่คือเวอร์ชันที่คุณคัดลอกและเรียกใช้ได้ 

      https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a

การตอบกลับจริงจากบริการจะเป็นรายการที่อยู่ ระยะทาง และระยะเวลาที่ตรงกัน ซึ่งคล้ายกับที่แสดงในตัวอย่างต่อไปนี้

ขยายเพื่อดูตัวอย่างการตอบกลับ

{
    "destination_addresses": [
        "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
        "1-13 St Giles High St, West End, London WC2H 8AG, UK",
        "6 Pancras Square, Kings Cross, London N1C 4AG, UK"
    ],
    "origin_addresses": [
        "Unnamed Road, London, UK"
    ],
    "rows": [
        {
            "elements": [
                {
                    "distance": {
                        "text": "4.5 km",
                        "value": 4540
                    },
                    "duration": {
                        "text": "15 mins",
                        "value": 924
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "5.0 km",
                        "value": 5043
                    },
                    "duration": {
                        "text": "17 mins",
                        "value": 1044
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "6.9 km",
                        "value": 6919
                    },
                    "duration": {
                        "text": "23 mins",
                        "value": 1357
                    },
                    "status": "OK"
                }
            ]
        }
    ],
    "status": "OK"
}

รูปภาพต่อไปนี้แสดงต้นทาง (เครื่องหมายสีแดง C) และปลายทางบนแผนที่

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

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

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

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

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

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

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

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

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

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

ช่วยให้ผู้ใช้จองเวลานัดหมายได้

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

คุณเปิดใช้ฟีเจอร์นี้ได้หลายวิธี ได้แก่ (1) ใช้ โซลูชัน Quick Builder Locator Plus เพื่อมอบฟังก์ชันการทำงานนี้แบบพร้อมใช้งาน และ (2) ใช้ Business Profile ส่วนนี้จะอธิบายตัวเลือกเหล่านี้โดยละเอียด

ใช้ Quick Builder Locator Plus

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

จองกับ Google
เพิ่มความสามารถในการจองลงในเครื่องมือระบุตำแหน่งร้านค้า

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

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

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

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

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

  1. สร้าง API ของ Business Profile 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 ดังนั้นคุณจึงต้อง ค้นหารหัสสถานที่ตั้งตามรหัสสถานที่ในแผนที่เพื่อดึงและแสดง ลิงก์การจองนัดหมายที่คุณสร้างขึ้น โดยทำการเรียก API ของ Business Profile ดังนี้

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

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

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

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

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

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

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

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

  1. Google My Business API ช่วยให้คุณ สร้างโพสต์ข้อเสนอที่ต้องการ แสดงประเภท OFFER ได้

  2. ค้นหาสถานที่ตั้ง Business Profile / รหัสสถานที่ตั้งที่เชื่อมโยงกับรหัสสถานที่บนแผนที่

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

    1. แสดงรายการบัญชีของ โปรเจ็กต์
    2. แสดงรายการ สถานที่ตั้งทั้งหมดภายในบัญชี
    3. ในสถานที่ตั้งของบัญชี 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"
    }
}

  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 หน้ารูปแบบแผนที่ในโปรเจ็กต์

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

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

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

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

การควบคุมจุดที่น่าสนใจ

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

ในหน้าสไตล์แผนที่ เมาส์คลิกสร้างสไตล์แผนที่ใหม่ ในหน้า สไตล์แผนที่ใหม่ ในส่วนสร้างสไตล์ของคุณเอง ปุ่มตัวเลือก Google Maps จะได้รับเลือก เมาส์คลิกปุ่มตัวเลือก 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 Locator Plus แดชบอร์ดข้อมูลวิเคราะห์จะช่วยคุณวิเคราะห์และสร้างข้อมูลเชิงลึก ซึ่งจะช่วยให้คุณเห็นภาพว่าผู้เข้าชมเว็บไซต์มีส่วนร่วมกับเครื่องมือระบุตำแหน่งร้านค้าได้ดีเพียงใด โดยอิงตามข้อมูลที่ไม่ระบุตัวตน

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

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

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

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

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

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