ภาพรวม
แพลตฟอร์ม Google Maps พร้อมให้บริการบนเว็บ (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 | |
| การระบุตำแหน่งของผู้ใช้ | เพิ่มฟังก์ชันการพิมพ์ไปเรื่อยๆ เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์มและเพิ่มความแม่นยำของที่อยู่ด้วยการกดแป้นพิมพ์เพียงไม่กี่ครั้ง | |
| การระบุร้านค้าที่ใกล้ที่สุด | คำนวณระยะทางและเวลาในการเดินทางสำหรับต้นทางและปลายทางหลายแห่ง โดยระบุรูปแบบการเดินทางต่างๆ ได้ เช่น เดินเท้า ขับรถ ขนส่งสาธารณะ หรือปั่นจักรยาน | |
| การแสดงข้อมูลร้านค้า | แสดงข้อมูลที่เป็นประโยชน์ใน Store เพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายขึ้น | |
| การให้เส้นทางการนําทาง | ดูข้อมูลเส้นทางจากต้นทางไปยังปลายทางโดยใช้รูปแบบการเดินทางต่างๆ เช่น เดิน ขับรถ ปั่นจักรยาน และขนส่งสาธารณะ | |
| การส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่ | นอกจากการแสดงเส้นทางในหน้าเว็บแล้ว คุณยังส่งเส้นทางไปยังโทรศัพท์ของผู้ใช้เพื่อนำทางโดยใช้ Google Maps ได้ทุกที่ทุกเวลา | |
| การแสดงตำแหน่งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ | สร้างเครื่องหมายแผนที่ที่กำหนดเองเพื่อช่วยให้สถานที่ของคุณโดดเด่น และจัดสไตล์แผนที่ให้เข้ากับสีของแบรนด์ แสดง (หรือซ่อน) จุดที่น่าสนใจ (POI) ที่เฉพาะเจาะจงบนแผนที่เพื่อช่วยให้ผู้ใช้ได้ทราบทิศทางของตนเองได้ดียิ่งขึ้น และควบคุมความหนาแน่นของ POI เพื่อป้องกันไม่ให้แผนที่รก | |
| การรวมข้อมูลตำแหน่งที่กำหนดเองเข้ากับรายละเอียดสถานที่ | รวมรายละเอียดสถานที่ที่กำหนดเองของคุณเองเข้ากับรายละเอียดสถานที่เพื่อให้ผู้ใช้มีชุดข้อมูลที่สมบูรณ์สำหรับการตัดสินใจ |
การเชื่อมโยงสถานที่ตั้งของร้านค้ากับสถานที่ใน Google Maps Platform
การรับรหัสสถานที่
| ตัวอย่างนี้ใช้ Places API | มีให้บริการด้วย: JavaScript |
คุณอาจมีฐานข้อมูลร้านค้าที่มีข้อมูลพื้นฐาน เช่น ชื่อของสถานที่ ที่อยู่ และหมายเลขโทรศัพท์ และต้องการเชื่อมโยงสถานที่นั้นกับสถานที่ในแพลตฟอร์ม Google Maps เป็นชุดปลายทางสุดท้ายที่ผู้ใช้มารับผลิตภัณฑ์ได้ หากต้องการดึงข้อมูลเกี่ยวกับสถานที่นั้นๆ ที่ 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 |
องค์ประกอบหลักในเครื่องมือค้นหาผลิตภัณฑ์คือการระบุตำแหน่งเริ่มต้นของผู้ใช้ คุณสามารถเสนอ 2 ตัวเลือกให้ผู้ใช้ระบุตำแหน่งเริ่มต้นได้ ได้แก่ การพิมพ์ต้นทางของการค้นหา หรือการให้สิทธิ์แก่บริการตำแหน่งทางภูมิศาสตร์ของเว็บเบราว์เซอร์หรือบริการตำแหน่งของอุปกรณ์เคลื่อนที่
การจัดการรายการที่พิมพ์โดยใช้การเติมข้อความอัตโนมัติ
ผู้ใช้ในปัจจุบันคุ้นเคยกับฟังก์ชันการเติมข้อความอัตโนมัติขณะพิมพ์ใน Google Maps เวอร์ชันสำหรับผู้บริโภค ฟังก์ชันการทำงานนี้ผสานรวมเข้ากับแอปพลิเคชันใดก็ได้โดยใช้ไลบรารี Places ของแพลตฟอร์ม Google Maps บนอุปกรณ์เคลื่อนที่และเว็บ เมื่อผู้ใช้พิมพ์ที่อยู่ ระบบจะเติมส่วนที่เหลือให้โดยอัตโนมัติผ่านการใช้วิดเจ็ต นอกจากนี้ คุณยังระบุฟังก์ชันการเติมข้อความอัตโนมัติของคุณเองได้โดยใช้ไลบรารีสถานที่โดยตรง
ในตัวอย่างต่อไปนี้ ให้เพิ่มไลบรารีการเติมข้อความอัตโนมัติของสถานที่ลงในเว็บไซต์โดยเพิ่มพารามิเตอร์ 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 โปรดดูวิธีเปิดใช้หน้าต่างใช้ตำแหน่งของฉัน
การระบุร้านค้าที่ใกล้ที่สุด
| ตัวอย่างนี้ใช้ บริการเมทริกซ์ระยะทาง, Maps JavaScript API | มีให้บริการด้วย: Distance Matrix API |
เมื่อทราบตําแหน่งของผู้แล้ว คุณสามารถเปรียบเทียบตําแหน่งนี้กับตําแหน่งร้านค้า การทำเช่นนี้ด้วยบริการเมทริกซ์ระยะทางของ Maps JavaScript API จะช่วยให้ผู้ใช้เลือกสถานที่ที่สะดวกที่สุดสำหรับตนได้โดยใช้เวลาในการขับรถหรือระยะทางบนถนน
วิธีมาตรฐานในการจัดระเบียบรายการสถานที่ตั้งคือการจัดเรียงตามระยะทาง ระยะทางนี้มักคำนวณโดยใช้เส้นตรงจากผู้ใช้ไปยังสถานที่ตั้ง แต่วิธีนี้อาจทำให้เข้าใจผิดได้ เส้นตรงอาจอยู่เหนือแม่น้ำที่ข้ามไม่ได้หรือผ่านถนนที่คับคั่งในเวลาที่สถานที่อื่นอาจสะดวกกว่า ซึ่งสำคัญเมื่อคุณมีหลายสถานที่ตั้งที่อยู่ห่างกันเพียงไม่กี่กิโลเมตร
บริการเมทริกซ์ระยะทางของ 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;
});
}
คุณสามารถแสดงสถานะสินค้าคงคลังของผลิตภัณฑ์ตามฐานข้อมูลสินค้าคงคลังสำหรับสถานที่ใกล้เคียงแต่ละแห่ง
การแสดงข้อมูลร้านค้า
| ตัวอย่างนี้ใช้: 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 จะโหลดในเว็บเบราว์เซอร์ของอุปกรณ์ ประสบการณ์การใช้งานทั้ง 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 Platform เพื่อดูรายการภาษาและภูมิภาคที่รองรับทั้งหมด และดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้พารามิเตอร์ region
ถัดไป คุณต้องมี div ของ HTML เพื่อวางแผนที่ในหน้าเว็บ
ตำแหน่งที่จะแสดงแผนที่
<div id="map"></div>ขั้นตอนถัดไปคือการตั้งค่าฟังก์ชันพื้นฐานของแผนที่ ซึ่งทำได้ในฟังก์ชันสคริปต์ initMap ที่ระบุไว้ใน URL ของสคริปต์ ในสคริปต์นี้ซึ่งแสดงในตัวอย่างต่อไปนี้ คุณสามารถตั้งค่าตำแหน่งเริ่มต้น ประเภทแผนที่ และตัวควบคุมที่จะพร้อมใช้งานบนแผนที่สําหรับผู้ใช้ โปรดทราบว่า getElementById() อ้างอิงรหัส "map" 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 ช่วยให้คุณจัดสไตล์แผนที่ในลักษณะที่ช่วยให้ผู้ใช้ค้นหาสถานที่ที่ใกล้ที่สุด ไปถึงที่หมายได้เร็วที่สุด และช่วยคุณเสริมสร้างแบรนด์ เช่น คุณสามารถเปลี่ยนสีแผนที่ให้เข้ากับการสร้างแบรนด์ และลดสิ่งรบกวนในแผนที่ได้โดยการควบคุมจุดที่น่าสนใจที่ผู้ใช้มองเห็น นอกจากนี้ Google Maps Platform ยังมีเทมเพลตแผนที่เริ่มต้นจํานวนหนึ่ง ซึ่งบางรายการได้รับการเพิ่มประสิทธิภาพสําหรับอุตสาหกรรมต่างๆ เช่น การท่องเที่ยว โลจิสติกส์ อสังหาริมทรัพย์ ค้าปลีก
คุณสร้างหรือแก้ไขสไตล์แผนที่ได้ในหน้าสไตล์แผนที่ของ Google Cloud Console ในโปรเจ็กต์
ขยายเพื่อดูภาพเคลื่อนไหวของการสร้างและการจัดสไตล์แผนที่ใน Cloud Console
รูปแบบแผนที่อุตสาหกรรม
ภาพเคลื่อนไหวนี้แสดงรูปแบบแผนที่เฉพาะอุตสาหกรรมที่กำหนดไว้ล่วงหน้าซึ่งคุณใช้ได้ รูปแบบเหล่านี้เป็นจุดเริ่มต้นที่ดีที่สุดสําหรับอุตสาหกรรมแต่ละประเภท ตัวอย่างเช่น แผนที่สไตล์ค้าปลีกจะลดจุดที่น่าสนใจบนแผนที่ ซึ่งช่วยให้ผู้ใช้มุ่งเน้นที่สถานที่ตั้งของคุณ รวมถึงจุดสังเกตต่างๆ เพื่อช่วยในการไปยังสถานที่ที่ใกล้ที่สุดได้อย่างรวดเร็วและมั่นใจที่สุด
การควบคุมจุดที่น่าสนใจ
ภาพเคลื่อนไหวนี้กำหนดสีเครื่องหมายสำหรับจุดที่น่าสนใจและเพิ่มความหนาแน่นของจุดที่น่าสนใจในสไตล์แผนที่ ยิ่งความหนาแน่นสูงเท่าใด เครื่องหมายจุดที่น่าสนใจก็จะปรากฏบนแผนที่มากขึ้นเท่านั้น
สไตล์แผนที่แต่ละสไตล์จะมีรหัสของตัวเอง หลังจากเผยแพร่รูปแบบในคอนโซล Google Cloud แล้ว คุณจะอ้างอิงรหัสแผนที่นั้นในโค้ดได้ ซึ่งหมายความว่าคุณจะอัปเดตรูปแบบแผนที่ได้แบบเรียลไทม์โดยไม่ต้องรีแฟกทอริงแอป รูปลักษณ์ใหม่จะปรากฏในแอปพลิเคชันที่มีอยู่โดยอัตโนมัติและใช้งานได้ในแพลตฟอร์มต่างๆ ตัวอย่างต่อไปนี้แสดงวิธีเพิ่มรหัสแผนที่ลงในหน้าเว็บโดยใช้ 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 เช่น การปิดชั่วคราว เวลาทำการในช่วงวันหยุด ตลอดจนการให้คะแนน รูปภาพ และรีวิวของผู้ใช้ หากมีข้อมูลติดต่อของร้านค้าอยู่แล้ว คุณจะไม่จําเป็นต้องขอช่องเหล่านั้นจากรายละเอียดสถานที่ และสามารถจํากัดคําขอให้ดึงข้อมูลเฉพาะช่องข้อมูลพื้นฐานหรือบรรยากาศ ทั้งนี้ขึ้นอยู่กับสิ่งที่คุณต้องการแสดง
คุณอาจมีข้อมูลสถานที่ตั้งของคุณเองเพื่อเสริมหรือใช้แทนรายละเอียดสถานที่ โค้ดแล็บสำหรับตัวระบุตำแหน่งแบบ Full-Stack มีตัวอย่างการใช้ GeoJSON กับฐานข้อมูลเพื่อจัดเก็บและเรียกดูรายละเอียดตำแหน่งของคุณเอง