ภาพรวม
Google Maps Platform มีให้บริการบนเว็บ (JS, TS), Android และ iOS และยังมี API ของบริการเว็บสำหรับการรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทางอีกด้วย ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มหนึ่ง แต่จะมีลิงก์เอกสารประกอบสำหรับการใช้งานบนแพลตฟอร์มอื่นๆ
เมื่อเห็นผลิตภัณฑ์ของคุณทางออนไลน์ ผู้ใช้ก็ต้องการหาวิธีที่ดีที่สุดและสะดวกที่สุดในการสั่งซื้อ คู่มือการใช้งานเครื่องระบุตำแหน่งผลิตภัณฑ์และเคล็ดลับการปรับแต่งที่เรานำเสนอในหัวข้อนี้ คือสิ่งที่เราแนะนำในฐานะชุด Google Maps Platform API ที่เหมาะสมที่สุดในการสร้างประสบการณ์ของผู้ใช้เครื่องระบุตำแหน่งผลิตภัณฑ์ที่ยอดเยี่ยม
ด้วยการปฏิบัติตามคู่มือการติดตั้งใช้งานนี้ คุณจะช่วยให้ลูกค้าเห็นข้อมูลโดยละเอียด ที่จำเป็นต่อการค้นหาผลิตภัณฑ์ของคุณและบอกเส้นทางไปยังร้านค้าที่มีสินค้า ไม่ว่าลูกค้าจะขับรถ ปั่นจักรยาน เดิน หรือใช้บริการขนส่งสาธารณะ
กำลังเปิดใช้ API
หากต้องการใช้เครื่องระบุตำแหน่งผลิตภัณฑ์ คุณต้องเปิดใช้ API ต่อไปนี้ใน Google Cloud Console ไฮเปอร์ลิงก์ต่อไปนี้จะส่งคุณไปยัง Google Cloud Console เพื่อเปิดใช้ API แต่ละรายการสำหรับโปรเจ็กต์ที่เลือก
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่า โปรดดูการเริ่มต้นใช้งาน Google Maps Platform
ส่วนต่างๆ ของคู่มือการติดตั้งใช้งาน
ต่อไปนี้คือการใช้งานและการปรับแต่งที่เราจะกล่าวถึงในหัวข้อนี้
- ไอคอนเครื่องหมายถูกเป็นขั้นตอนหลักในการใช้งาน
- ไอคอนดาวเป็นการปรับแต่งที่ไม่บังคับแต่แนะนำให้ปรับแต่งเพื่อเพิ่มประสิทธิภาพโซลูชัน
| การเชื่อมโยงสถานที่ตั้งร้านค้ากับสถานที่ใน Google Maps Platform | จับคู่ตำแหน่งร้านค้ากับสถานที่ใน Google Maps Platform | |
| การระบุสถานที่ตั้งของผู้ใช้ | เพิ่มฟังก์ชัน "พิมพ์ขณะใช้งาน" เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์ม และปรับปรุงความถูกต้องของที่อยู่ด้วยการกดแป้นพิมพ์ขั้นต่ำ | |
| การค้นหาร้านค้าที่ใกล้ที่สุด | คำนวณระยะเวลาเดินทางและเวลาเดินทางจากต้นทางและปลายทางหลายแห่ง (ไม่บังคับ) ระบุรูปแบบการขนส่งที่หลากหลาย เช่น การเดิน การขับรถ ขนส่งสาธารณะ หรือการปั่นจักรยาน | |
| การแสดงข้อมูลร้านค้า | แสดงข้อมูลที่เต็มไปด้วยข้อมูลในร้านค้าของคุณ เพื่อให้ผู้ใช้ไปยังร้านค้าได้ง่ายขึ้น | |
| การแสดงเส้นทางการนำทาง | รับข้อมูลเส้นทางจากต้นทางถึงปลายทางโดยใช้ขนส่งรูปแบบต่างๆ เช่น เดินเท้า ขับรถ ปั่นจักรยาน และขนส่งมวลชน | |
| การส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่ | นอกจากการแสดงเส้นทางในหน้าเว็บแล้ว คุณยังส่งเส้นทางไปที่โทรศัพท์ของผู้ใช้เพื่อนำทางโดยใช้ Google Maps ได้ทุกที่ทุกเวลาอีกด้วย | |
| การแสดงสถานที่ตั้งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ | สร้างเครื่องหมายบนแผนที่ที่กำหนดเองเพื่อช่วยให้สถานที่ของคุณโดดเด่น และกำหนดสไตล์แผนที่ให้เข้ากับสีของแบรนด์ แสดง (หรือซ่อน) จุดที่น่าสนใจ (POI) ที่เฉพาะเจาะจงบนแผนที่เพื่อช่วยให้ผู้ใช้หาทิศทางของตัวเองได้ดีขึ้น และควบคุมความหนาแน่นของจุดที่น่าสนใจเพื่อไม่ให้แผนที่รกรุงรัง | |
| การรวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่ | รวมรายละเอียดสถานที่ตั้งที่คุณกำหนดเองเข้ากับรายละเอียดสถานที่ เพื่อมอบชุดข้อมูลที่สมบูรณ์ให้แก่ผู้ใช้เพื่อการตัดสินใจ |
การเชื่อมโยงตำแหน่งร้านค้ากับสถานที่ใน Google Maps Platform
กำลังรับรหัสสถานที่
| ตัวอย่างนี้ใช้สิ่งต่อไปนี้ 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
การระบุสถานที่ตั้งของผู้ใช้
| ตัวอย่างนี้ใช้สิ่งต่อไปนี้ ไลบรารีการเติมข้อความอัตโนมัติสถานที่ใน Maps JavaScript API | เวอร์ชันที่มีให้บริการ: Android | iOS |
องค์ประกอบหลักใน Product Locator คือการระบุตำแหน่งเริ่มต้นของผู้ใช้ คุณสามารถเสนอ 2 ตัวเลือกให้ผู้ใช้ระบุตำแหน่งเริ่มต้น ได้แก่ การพิมพ์ต้นทางของการค้นหา หรือการให้สิทธิ์เข้าถึงตำแหน่งทางภูมิศาสตร์ในเว็บเบราว์เซอร์หรือบริการระบุตำแหน่งของอุปกรณ์เคลื่อนที่
การจัดการรายการที่พิมพ์โดยใช้การเติมข้อความอัตโนมัติ
ผู้ใช้ปัจจุบันคุ้นเคยกับฟังก์ชันการเติมข้อความอัตโนมัติล่วงหน้าใน Google Maps เวอร์ชันสำหรับผู้ใช้ทั่วไป คุณสามารถผสานรวมฟังก์ชันการทำงานนี้เข้ากับแอปพลิเคชันใดก็ได้โดยใช้ไลบรารี Places ของ Google Maps Platform บนอุปกรณ์เคลื่อนที่และเว็บ เมื่อผู้ใช้พิมพ์ที่อยู่ การเติมข้อความอัตโนมัติจะเติมส่วนที่เหลือให้ด้วยการใช้วิดเจ็ต คุณยังสามารถใช้ฟังก์ชันเติมข้อความอัตโนมัติ โดยใช้ไลบรารีสถานที่โดยตรง
ในตัวอย่างต่อไปนี้ ให้เพิ่มไลบรารีการเติมข้อความอัตโนมัติลงในเว็บไซต์ของคุณโดยการเพิ่มพารามิเตอร์ 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>สุดท้าย คุณต้องเริ่มต้นบริการเติมข้อความอัตโนมัติ และลิงก์กับกล่องข้อความที่มีชื่อ การจำกัดการคาดคะเนการเติมข้อความอัตโนมัติในการเติมพิกัดภูมิศาสตร์จะกำหนดช่องป้อนข้อมูลให้ยอมรับที่อยู่ ย่านใกล้เคียง เมือง และรหัสไปรษณีย์ เพื่อให้ผู้ใช้ป้อนข้อมูลที่เฉพาะเจาะจงในระดับใดก็ได้เพื่ออธิบายต้นทาง อย่าลืมขอช่อง 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() จะเริ่มทำงาน ซึ่งจะนำรูปทรงเรขาคณิตของผลการค้นหาที่ตรงกันซึ่งเป็นสถานที่ตั้งของผู้ใช้ มาค้นหาสถานที่ใกล้เคียงที่สุดโดยอิงตามพิกัดเหล่านั้นเป็นต้นทาง ซึ่งอธิบายไว้ในส่วนการระบุร้านค้าที่ใกล้ที่สุด
ขยายการ์ดนี้เพื่อดูวิดีโอคำแนะนำแบบทีละขั้นเกี่ยวกับการเพิ่มการเติมข้อมูลสถานที่อัตโนมัติลงในแอป
เว็บไซต์
แอป Android
แอป iOS
การใช้ตำแหน่งทางภูมิศาสตร์ของเบราว์เซอร์
ในการขอและจัดการตำแหน่งทางภูมิศาสตร์ของเบราว์เซอร์ HTML5 โปรดดูวิธีเปิดใช้หน้าต่างใช้ตำแหน่งของฉันดังนี้
ระบุร้านค้าที่ใกล้ที่สุด
| ตัวอย่างนี้ใช้ Distance Matrix Service, Maps JavaScript API | ตัวเลือกดังกล่าวเพิ่มเติม: Distance Matrix API |
เมื่อทราบตำแหน่งของผู้ใช้แล้ว ก็เปรียบเทียบตำแหน่งดังกล่าวกับตำแหน่งร้านค้าได้ เมื่อใช้บริการ Distance Matrix Service Maps JavaScript API จะช่วยให้ผู้ใช้ของคุณเลือกสถานที่ที่สะดวกที่สุดสำหรับตนโดยใช้เวลาในการขับรถหรือระยะทางบนท้องถนน
วิธีมาตรฐานในการจัดระเบียบรายการสถานที่คือการจัดเรียงตามระยะทาง บ่อยครั้งที่ระยะทางนี้คำนวณได้ง่ายๆ โดยใช้เส้นตรงของผู้ใช้ไปยังตำแหน่ง แต่อาจทำให้เกิดความเข้าใจผิดได้ เส้นตรงอาจข้ามแม่น้ำที่ไหลผ่านไม่ได้หรือผ่านถนนพลุกพล่านในช่วงที่สถานที่อื่นน่าจะสะดวกกว่า ซึ่งเป็นสิ่งสำคัญเมื่อคุณมีสถานที่หลายแห่ง ที่อยู่ห่างกันไม่เกิน 2-3 กิโลเมตร
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 ลอนดอน
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);
}
}
เครื่องมือเพิ่มประสิทธิภาพเครื่องระบุตำแหน่งผลิตภัณฑ์
คุณสามารถปรับปรุงประสบการณ์ของผู้ใช้เพิ่มเติมได้ ทั้งนี้ขึ้นอยู่กับความต้องการทางธุรกิจหรือผู้ใช้
การแสดงเส้นทางการนำทาง
| ตัวอย่างนี้ใช้ข้อมูลต่อไปนี้ บริการเส้นทาง JavaScript API ของ Maps | นอกจากนี้ยังมี: บริการเว็บ Directions API สำหรับใช้ใน Android และ iOS ทั้งจากแอปพลิเคชันโดยตรงหรือจากระยะไกลผ่านพร็อกซีเซิร์ฟเวอร์ |
เมื่อคุณแสดงเส้นทางจากภายในไซต์หรือแอปพลิเคชันแก่ผู้ใช้ ผู้ใช้ไม่จำเป็นต้องออกจากเว็บไซต์ของคุณ และเสียสมาธิไปกับหน้าเว็บอื่นๆ หรือเห็นคู่แข่งบนแผนที่ คุณยังสามารถแสดงปริมาณการปล่อยคาร์บอนของโหมดการเดินทางที่เจาะจง และแสดงผลกระทบของการเดินทางแต่ละครั้งโดยใช้ชุดข้อมูลคาร์บอนที่คุณอาจมีได้
นอกจากนี้ บริการเส้นทางยังมีฟังก์ชันที่ช่วยให้คุณสามารถประมวลผลผลลัพธ์และแสดงบนแผนที่ได้อย่างง่ายดาย
ต่อไปนี้เป็นตัวอย่างการแสดงแผงเส้นทาง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวอย่าง โปรดดูการแสดงเส้นทางของข้อความ
กำลังส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่
คุณสามารถส่งข้อความหรือส่งลิงก์เส้นทางไปให้ทางอีเมลเพื่อช่วยให้ผู้ใช้ไปถึงสถานที่หนึ่งๆ ได้ง่ายขึ้น เมื่อผู้ใช้คลิก แอป Google Maps จะเปิดขึ้นในโทรศัพท์ หากมีการติดตั้งไว้ หรือ maps.google.com จะโหลดขึ้นมาในเว็บเบราว์เซอร์ของอุปกรณ์ ประสบการณ์ทั้ง 2 อย่างนี้ช่วยให้ผู้ใช้สามารถใช้การนำทางแบบเลี้ยวต่อเลี้ยว รวมถึงการนำทางด้วยเสียงเพื่อไปถึงจุดหมายได้
ใช้
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 คุณยังสามารถกำหนดภาษาหรือภูมิภาคของแผนที่เพื่อให้แน่ใจว่ามีการจัดรูปแบบอย่างถูกต้องสำหรับประเทศที่คุณกำหนดเป้าหมาย การตั้งค่าภูมิภาคยังช่วยให้มั่นใจได้ว่า
พฤติกรรมของแอปที่ใช้นอกสหรัฐอเมริกามีอคติตาม
ภูมิภาคที่คุณตั้งค่าไว้ ดูรายละเอียดการครอบคลุมของแพลตฟอร์ม Google Maps สำหรับรายการภาษาและภูมิภาคที่รองรับทั้งหมด และดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานพารามิเตอร์ 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 ในโปรเจ็กต์ของคุณได้
ขยายเพื่อดูภาพเคลื่อนไหวของการสร้างและจัดรูปแบบแผนที่ใน 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 กับฐานข้อมูลเพื่อจัดเก็บและเรียกดูรายละเอียดตำแหน่งของคุณเอง