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

ภาพรวม

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

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

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

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

• Maps JavaScript API
• Places API
• API การระบุพิกัดทางภูมิศาสตร์
• Distance Matrix API
• Directions API

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

ส่วนคู่มือการใช้งาน

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

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

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

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

ตัวอย่างนี้ใช้ Places API

ตัวเลือกอื่นที่พร้อมใช้งาน: JavaScript

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

ตัวอย่างนี้ใช้สิ่งต่อไปนี้ ไลบรารีการเติมข้อความอัตโนมัติจาก Places ใน Maps JavaScript API

นอกจากนี้ยังมีบริการ: Android | iOS

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

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

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

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

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

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

ตัวอย่างนี้ใช้ บริการ Distance Matrix, Maps JavaScript API

นอกจากนี้ยังมี Distance Matrix API

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

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

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

ตัวอย่างต่อไปนี้เรียกใช้บริการ Distance Matrix Service, 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;
    });
}

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

ตัวอย่างนี้ใช้: Places Library, Maps JavaScript API

ยังพร้อมให้บริการ: Places SDK สำหรับ Android | Places SDK สำหรับ iOS | Places API

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

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

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

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

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

---

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

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

ตัวอย่างนี้ใช้ บริการเส้นทาง Maps JavaScript API

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

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

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

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

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

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

https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

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

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

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

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

ตัวอย่างนี้ใช้ 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_productlocator_v1_a"></script>

URL จะอ้างอิงฟังก์ชัน initMap ของ JavaScript ซึ่งเรียกใช้เมื่อโหลดหน้าเว็บ ใน 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
});
}

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

การปรับแต่งแผนที่

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

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

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

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

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

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

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

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

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