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

ภาพรวม

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

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

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

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

กำลังเปิดใช้ API

• Maps JavaScript API
• Places API
• Geocoding API
• API เมทริกซ์ระยะทาง
• Directions API

ส่วนการใช้งาน

ต่อไปนี้เป็นแนวทางปฏิบัติและการปรับแต่งที่เราจะกล่าวถึงในหัวข้อนี้

• check_circle_filled การใช้ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติหลัก
• stars ไอคอนรูปดาวเป็นการปรับแต่งที่ไม่บังคับ แต่แนะนำให้ปรับแต่งเพื่อ ปรับปรุงโซลูชันได้

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

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

การใช้ Quick Builder Locator Plus

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

วันที่

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

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

ก่อนอื่น คุณต้องรวม Maps JavaScript API ไว้ในหน้าเว็บ ซึ่งทำผ่านการเชื่อมโยงสคริปต์ต่อไปนี้ในหน้า HTML ของคุณ

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

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

ขั้นต่อไป คุณต้องใช้ HTML div เพื่อวางแผนที่ของคุณบนหน้าเว็บ นี่คือที่ซึ่งแผนที่จะปรากฏ

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

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

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

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

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

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

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

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

ตัวอย่างต่อไปนี้ใช้ไลบรารีของ 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);
      }
    });
  });
  
  

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

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

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

การเพิ่มไลบรารีการเติมข้อความอัตโนมัติของสถานที่ลงในไซต์เป็นเรื่องของการเพิ่ม ลงใน URL สคริปต์ JavaScript API ของ 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);
}

จากนั้นคุณจะเห็นความสัมพันธ์ระหว่างผู้ใช้กับสถานที่ใดๆ ที่แสดงในภาพต่อไปนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การใช้ Quick Builder Locator Plus

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

วันที่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การรวม map_ids อย่างน้อย 1 รายการใน URL สคริปต์ ค่า Maps JavaScript API ทำให้รูปแบบดังกล่าวพร้อมใช้งานโดยอัตโนมัติเพื่อให้แผนที่เร็วขึ้น การแสดงผลเมื่อคุณเรียกใช้รูปแบบเหล่านั้นในโค้ดของคุณ

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

โค้ดต่อไปนี้จะแสดงแผนที่ที่มีการจัดรูปแบบบนหน้าเว็บ (ไม่แสดงเป็น HTML องค์ประกอบ <div id="map"></div> ที่แผนที่จะปรากฏใน page.)

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

วันที่

หากต้องการเข้าถึงรายงานนี้ ให้ไปที่ ส่วนรายงานการมีส่วนร่วมของ Cloud Console ดูรายละเอียดเพิ่มเติมเกี่ยวกับรายงานนี้ได้ที่ รายงานการมีส่วนร่วม

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

การตั้งค่า Google Analytics

หากใช้ Google Analytics กับแอปอยู่แล้ว ให้ข้ามส่วนนี้

ต่อไปนี้เป็นตัวอย่างของ "แท็กที่ติดทั่วเว็บไซต์" ที่คุณวางในเว็บไซต์เพื่อเปิดใช้ Google Analytics

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

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

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

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

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

gtag('event', 'location', {
  'method': 'address'
});

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

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

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

รูปต่อไปนี้แสดงลักษณะที่การเรียก Google Analytics ปรากฏในส่วน "ตรวจสอบ" ของเบราว์เซอร์ ในแท็บเครือข่าย (คลิกเพื่อขยาย)

คุณสามารถตรวจสอบได้ว่าแท็กเหตุการณ์ที่กําหนดเองได้รับการบันทึกอย่างถูกต้องโดยดูที่ "เรียลไทม์" ใน Google Analytics ตัวอย่างเช่น "ตำแหน่ง" เหตุการณ์ที่ตั้งค่าไว้ก่อนหน้านี้สำหรับ ฟีเจอร์เติมข้อความอัตโนมัติจะปรากฏใน Google Analytics ดังที่แสดงในรูปต่อไปนี้

หรือคุณสามารถตรวจสอบเหตุการณ์แบบเรียลไทม์โดยใช้ DebugView ดังที่แสดงใน รูปต่อไปนี้ โปรดทราบว่าคุณต้องรอ 24 ชั่วโมงจึงจะเข้าถึงรายงานเหตุการณ์ฉบับเต็มใน การมีส่วนร่วม > ส่วนเหตุการณ์ของ Google Analytics

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

เมตริก 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 รายการ
• การคลิกข้อเสนอของ LOCAL_POST_ACTIONS_CALL_TO_ACTION 42 ครั้ง
• การดูโพสต์ในพื้นที่บน Google Search 11 ครั้ง

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

ไม่ว่าคุณจะใช้กลยุทธ์เมตริกใด การวัดผลจะเป็นมากกว่าแค่การดูว่าคุณเป็นอย่างไร กับ KPI ของคุณ ตัวเลขเหล่านี้ยังช่วยให้คุณเข้าใจถึงผลกระทบของตัวระบุตำแหน่งเหล่านี้ ที่ธุรกิจของคุณได้รับ นอกจากนี้ คุณสามารถเปรียบเทียบตัวชี้วัดจาก 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 ใน อินเทอร์แอกทีฟ (เว็บ) หรือคงที่ (API) โดยขึ้นอยู่กับว่าคุณต้องการให้ผู้ใช้ "มองไปรอบๆ" พื้นที่ใน 360 องศา Street Viewis ยังมีให้บริการสำหรับ Android และ iOS

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

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

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

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

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