เครื่องระบุตำแหน่งผลิตภัณฑ์ - คู่มือการใช้งาน

ภาพรวม

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

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

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

หากต้องการใช้เครื่องระบุตำแหน่งผลิตภัณฑ์ คุณต้องเปิดใช้ API ต่อไปนี้ใน Google Cloud Console ไฮเปอร์ลิงก์ต่อไปนี้จะส่งคุณไปยัง Google Cloud Console เพื่อเปิดใช้ API แต่ละรายการสำหรับโปรเจ็กต์ที่เลือก ให้ทำดังนี้

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า ดูที่ การรับ ที่เริ่มต้นด้วย Google Maps Platform

ส่วนต่างๆ ของคู่มือการติดตั้งใช้งาน

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

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

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

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

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

การจัดการรายการที่พิมพ์โดยใช้การเติมข้อความอัตโนมัติ

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

ในตัวอย่างต่อไปนี้ ให้เพิ่มไลบรารีการเติมข้อมูลอัตโนมัติของสถานที่ลงในไซต์โดย กำลังเพิ่มพารามิเตอร์ libraries=places ลงใน URL ของสคริปต์ JavaScript API ของ Maps

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_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", searchFromOrigin);
}

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

การใช้ตำแหน่งทางภูมิศาสตร์ของเบราว์เซอร์

หากต้องการขอและจัดการตำแหน่งทางภูมิศาสตร์ของเบราว์เซอร์ HTML5 โปรดดูวิธี เปิดใช้หน้าต่างใช้ตำแหน่งของฉัน:

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

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

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

ตัวอย่างต่อไปนี้เรียกใช้ฟังก์ชัน บริการเมตริกซ์ระยะทาง, Maps JavaScript API, การระบุ และตำแหน่งร้านค้า 25 แห่งพร้อมกัน

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

คุณแสดงสถานะสต็อกสินค้าของผลิตภัณฑ์ต่อสถานที่ใกล้เคียงแต่ละแห่งได้โดยอิงตาม ฐานข้อมูลสินค้าคงคลัง

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

หลังจากโทรหา Maps JavaScript API เพื่อดูรายละเอียดสถานที่ คุณจะกรองและแสดงผลคำตอบได้

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

คำขอรายละเอียดสถานที่ต่อไปนี้จะแสดงที่อยู่ พิกัด เว็บไซต์ หมายเลขโทรศัพท์ คะแนน และเวลาทำการสำหรับรหัสสถานที่ของ Google ลอนดอน:

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};


service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

เครื่องมือเพิ่มประสิทธิภาพเครื่องระบุตำแหน่งผลิตภัณฑ์

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

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

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

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

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

ลิงก์ที่คลิกได้นี้ ซึ่งขยายตัวอย่าง URL ข้างต้น จะตั้งค่า originในฐานะสนามฟุตบอลของลอนดอนและใช้ travelmode=transit เพื่อแสดงเส้นทางขนส่งสาธารณะไปยัง ปลายทาง

หากต้องการส่งข้อความหรืออีเมลที่มี URL นี้ เราแนะนำให้ใช้ แอปพลิเคชันของบุคคลที่สาม เช่น twilio หากใช้ App Engine คุณสามารถใช้บริษัทบุคคลที่สามเพื่อส่ง SMS ข้อความหรืออีเมล สำหรับข้อมูลเพิ่มเติม โปรดดู การส่งข้อความด้วยบริการของบุคคลที่สาม

การใช้แผนที่แบบไดนามิก

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

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

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

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_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
});
}

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

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

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

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

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

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

ต่อไปนี้เป็นตัวอย่างแผนที่ที่ใช้เครื่องหมายที่กำหนดเอง (ดูซอร์สโค้ดใน หัวข้อตัวทำเครื่องหมายที่กำหนดเองของ 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_productlocator_v1_a">
</script>

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

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});

ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวมการจัดรูปแบบแผนที่ในระบบคลาวด์ไว้ใน JavaScript (เว็บ) Android และ iOS

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

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

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