ภาพรวม
Google Maps Platform พร้อมให้บริการสำหรับเว็บ (JS, TS), Android และ iOS และยังมี API บริการเว็บสำหรับรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทางด้วย ตัวอย่างในคู่มือนี้เขียนขึ้นสำหรับแพลตฟอร์มเดียว แต่เราได้ระบุลิงก์เอกสารประกอบสำหรับการติดตั้งใช้งานในแพลตฟอร์มอื่นๆ ไว้แล้ว
เมื่อผู้ใช้เห็นผลิตภัณฑ์ของคุณทางออนไลน์ พวกเขาก็ต้องการหาวิธีที่ดีที่สุดและสะดวกที่สุดในการรับสินค้าที่สั่ง คำแนะนำในการติดตั้งใช้งานเครื่องมือระบุผลิตภัณฑ์ และเคล็ดลับการปรับแต่งคือสิ่งที่ Google แนะนำว่าเป็น การผสมผสาน API ของ Google Maps Platform ที่ดีที่สุดในการสร้างประสบการณ์ของผู้ใช้เครื่องมือระบุผลิตภัณฑ์ที่ยอดเยี่ยม
การทำตามคู่มือการติดตั้งใช้งานนี้จะช่วยให้ลูกค้าเห็นข้อมูลโดยละเอียดที่จำเป็นต่อการค้นหาผลิตภัณฑ์ของคุณ และให้เส้นทางไปยังร้านค้าที่มีสินค้าที่ลูกค้าต้องการ ไม่ว่าลูกค้าจะขับรถ ปั่นจักรยาน เดิน หรือใช้ระบบขนส่งสาธารณะ
เปิดใช้ API
หากต้องการใช้เครื่องมือระบุตำแหน่งผลิตภัณฑ์ คุณต้องเปิดใช้ API ต่อไปนี้ใน คอนโซล Google Cloud ไฮเปอร์ลิงก์ต่อไปนี้จะนำคุณไปยังคอนโซล Google Cloud เพื่อเปิดใช้ API แต่ละรายการสำหรับโปรเจ็กต์ที่เลือก
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่เริ่มต้นใช้งาน Google Maps Platform
ส่วนต่างๆ ของคู่มือการใช้งาน
การติดตั้งใช้งานและการปรับแต่งต่อไปนี้จะกล่าวถึงในที่นี้
- ไอคอนเครื่องหมายถูกเป็นขั้นตอนการติดตั้งใช้งานหลัก
- ไอคอนดาวเป็นการปรับแต่งที่ไม่บังคับแต่แนะนํา เพื่อเพิ่มประสิทธิภาพโซลูชัน
| เชื่อมโยงตำแหน่งร้านค้ากับสถานที่ใน Google Maps Platform | จับคู่ตำแหน่งร้านค้ากับสถานที่ใน Google Maps Platform | |
| ระบุตำแหน่งของผู้ใช้ | เพิ่มฟังก์ชันการพิมพ์ขณะที่พิมพ์เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์ม และปรับปรุงความแม่นยำของที่อยู่ด้วยการกดแป้นพิมพ์น้อยที่สุด | |
| ระบุร้านค้าที่ใกล้ที่สุด | คำนวณระยะทางการเดินทางและระยะเวลาเดินทางสำหรับต้นทางและ ปลายทางหลายแห่ง โดยอาจระบุรูปแบบการเดินทางต่างๆ เช่น การเดิน การขับรถ ขนส่งสาธารณะ หรือการปั่นจักรยาน | |
| แสดงข้อมูลร้านค้า | แสดงข้อมูลที่สมบูรณ์ในร้านค้า เพื่อให้ผู้ใช้ไปยังร้านค้าได้ง่ายขึ้น | |
| ให้เส้นทางนำทาง | รับข้อมูลเส้นทางจากต้นทางไปยังจุดหมายโดยใช้รูปแบบการ เดินทางต่างๆ เช่น การเดิน การขับรถ การปั่นจักรยาน และการขนส่งสาธารณะ | |
| ส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่ | นอกจากจะแสดงเส้นทางในหน้าเว็บแล้ว คุณยังส่ง เส้นทางไปยังโทรศัพท์ของผู้ใช้เพื่อการนำทางโดยใช้ Google Maps ได้ทุกที่ทุกเวลา | |
| แสดงตำแหน่งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ | สร้างเครื่องหมายแผนที่ที่กำหนดเองเพื่อช่วยให้สถานที่ตั้งของคุณโดดเด่น และจัดรูปแบบ แผนที่ให้ตรงกับสีของแบรนด์ แสดง (หรือซ่อน) จุดที่น่าสนใจ (POI) ที่เฉพาะเจาะจงบนแผนที่เพื่อช่วยให้ผู้ใช้ทราบตำแหน่งของตนเองได้ดียิ่งขึ้น และควบคุมความหนาแน่นของ POI เพื่อป้องกันไม่ให้แผนที่รก | |
| รวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่ | รวมรายละเอียดสถานที่ตั้งที่กำหนดเองของคุณเองเข้ากับรายละเอียดสถานที่เพื่อมอบชุดข้อมูลที่สมบูรณ์ให้แก่ผู้ใช้ในการตัดสินใจ |
เชื่อมโยงสถานที่ตั้งของร้านค้ากับสถานที่ใน Google Maps Platform
รับรหัสสถานที่
| ตัวอย่างนี้ใช้ Places API (ใหม่) | นอกจากนี้ยังมี JavaScript |
คุณอาจมีฐานข้อมูลร้านค้าที่มีข้อมูลพื้นฐาน เช่น ชื่อ
ของสถานที่ตั้ง ที่อยู่ และหมายเลขโทรศัพท์ และต้องการเชื่อมโยง
ฐานข้อมูลดังกล่าวกับสถานที่ใน Google Maps Platform เป็นชุดจุดหมายปลายทางสุดท้ายที่ผู้ใช้
สามารถไปรับผลิตภัณฑ์ได้ หากต้องการดึงข้อมูล
ที่ Google Maps Platform มีเกี่ยวกับสถานที่นั้น ซึ่งรวมถึงพิกัดทางภูมิศาสตร์
และข้อมูลที่ผู้ใช้มีส่วนร่วม ให้ค้นหารหัสสถานที่
ที่สอดคล้องกับร้านค้าแต่ละแห่งในฐานข้อมูล
คุณสามารถเรียกใช้
ปลายทาง Text Search (ใหม่) ใน Places API (ใหม่) และ
ขอเฉพาะฟิลด์ places.id ใน Field Mask (ซึ่งทริกเกอร์
SKU เฉพาะรหัส Text
Search Essentials)
ตัวอย่างต่อไปนี้แสดงการขอรหัสสถานที่สำหรับสำนักงาน Google ลอนดอน
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'คุณสามารถจัดเก็บรหัสสถานที่นี้ ในฐานข้อมูลพร้อมกับข้อมูลร้านค้าอื่นๆ และใช้เป็นวิธีที่มีประสิทธิภาพ ในการขอข้อมูลเกี่ยวกับร้านค้า ต่อไปนี้เป็นวิธีการใช้รหัสสถานที่เพื่อเข้ารหัสพิกัดภูมิศาสตร์ ดึงข้อมูลรายละเอียดสถานที่ และขอเส้นทางไปยังสถานที่
เข้ารหัสพิกัดภูมิศาสตร์ของสถานที่ตั้ง
| ตัวอย่างนี้ใช้ Geocoding API | นอกจากนี้ยังมี JavaScript |
หากฐานข้อมูลร้านค้ามีที่อยู่ แต่ไม่มีพิกัดทางภูมิศาสตร์ ให้ใช้ Geocoding API เพื่อรับละติจูดและลองจิจูดของที่อยู่นั้น เพื่อคำนวณว่าร้านค้าใดอยู่ใกล้ลูกค้ามากที่สุด คุณสามารถเข้ารหัสพิกัดภูมิศาสตร์ของร้านค้าในฝั่งเซิร์ฟเวอร์ จัดเก็บละติจูด และลองจิจูดในฐานข้อมูล และรีเฟรช อย่างน้อยทุก 30 วัน
ต่อไปนี้คือตัวอย่างการใช้ Geocoding API เพื่อรับ ละติจูดและลองจิจูดของรหัสสถานที่ที่แสดงผลสำหรับสำนักงาน Google ลอนดอน
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
ระบุตำแหน่งของผู้ใช้
| ตัวอย่างนี้ใช้: Place Autocomplete ใน Maps JavaScript API | นอกจากนี้ยังมี Android | iOS |
องค์ประกอบสำคัญในเครื่องมือระบุตำแหน่งผลิตภัณฑ์คือการระบุตำแหน่งเริ่มต้นของผู้ใช้ คุณสามารถเสนอ 2 ตัวเลือกให้ผู้ใช้ระบุต้นทาง ได้ ได้แก่ การพิมพ์ต้นทางของการค้นหา หรือการให้สิทธิ์แก่ตำแหน่งทางภูมิศาสตร์ของเว็บเบราว์เซอร์หรือบริการตำแหน่งบนอุปกรณ์เคลื่อนที่
จัดการรายการที่พิมพ์โดยใช้การเติมข้อความอัตโนมัติ
ปัจจุบันผู้ใช้คุ้นเคยกับฟังก์ชันการทำงานของการเติมข้อความอัตโนมัติใน Google Maps เวอร์ชันสำหรับผู้บริโภค คุณผสานรวมฟังก์ชันนี้เข้ากับแอปพลิเคชันใดก็ได้โดยใช้ไลบรารี Places ของ Google Maps Platform บนอุปกรณ์เคลื่อนที่และเว็บ เมื่อผู้ใช้พิมพ์ที่อยู่ การเติมข้อความอัตโนมัติจะกรอกส่วนที่เหลือ ผ่านการใช้วิดเจ็ต คุณยังระบุฟังก์ชันการเติมข้อความอัตโนมัติ ของคุณเองได้โดยใช้ Place Autocomplete Data API โดยตรง
ในตัวอย่างต่อไปนี้ ให้เพิ่มไลบรารี Places และ Marker ลงในเว็บไซต์โดย
เพิ่มพารามิเตอร์ libraries=places,marker ลงใน
URL สคริปต์ Maps JavaScript API
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>จากนั้นเพิ่มองค์ประกอบคอนเทนเนอร์ลงในหน้าเว็บที่จะเพิ่มวิดเจ็ต
PlaceAutocompleteElement
<div id="autocomplete-container"></div>สุดท้าย ให้เริ่มต้นวิดเจ็ต PlaceAutocompleteElement และต่อท้าย
วิดเจ็ตกับคอนเทนเนอร์ การจำกัดการคาดคะเนการเติมข้อความอัตโนมัติของสถานที่
ด้วย includedPrimaryTypes: ["geocode"] จะกำหนดค่าวิดเจ็ตให้
ยอมรับที่อยู่ ถนน ย่าน เมือง และรหัสไปรษณีย์ เพื่อให้ผู้ใช้ป้อน
ระดับความเฉพาะเจาะจงใดก็ได้เพื่ออธิบายต้นทาง เมื่อผู้ใช้เลือกคำทำนาย ระบบจะทริกเกอร์เหตุการณ์ gmp-select และคุณสามารถเรียกใช้
place.fetchFields() เพื่อขอฟิลด์ location
ที่มีละติจูดและลองจิจูดของต้นทางของผู้ใช้ คุณจะใช้พิกัดแผนที่เหล่านี้
เพื่อระบุความสัมพันธ์ของสถานที่ตั้งกับต้นทาง
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
ในตัวอย่างนี้ เมื่อผู้ใช้เลือกที่อยู่ ฟังก์ชัน
searchFromOrigin() จะเริ่มทำงาน โดยจะใช้ตำแหน่งของ
ผลการค้นหาที่ตรงกันซึ่งเป็นตำแหน่งของผู้ใช้ จากนั้นจะค้นหาตำแหน่งที่ใกล้ที่สุด
โดยอิงตามพิกัดเหล่านั้นเป็นจุดเริ่มต้น ซึ่งจะกล่าวถึงในส่วนระบุร้านค้าที่ใกล้ที่สุด
ขยายส่วนนี้เพื่อดูวิดีโอแบบทีละขั้นตอนเกี่ยวกับการเพิ่มการเติมข้อความอัตโนมัติของสถานที่ลงในแอป
เว็บไซต์
แอป Android
แอป iOS
ใช้ตำแหน่งทางภูมิศาสตร์ของเบราว์เซอร์
หากต้องการขอและจัดการตำแหน่งทางภูมิศาสตร์ของเบราว์เซอร์ HTML5 โปรดดูวิธี เปิดใช้หน้าต่างใช้ตำแหน่งของฉัน
ระบุร้านค้าที่ใกล้ที่สุด
| ตัวอย่างนี้ใช้ Routes Library, Maps JavaScript API | นอกจากนี้ยังมี Routes API |
เมื่อทราบตำแหน่งของผู้ใช้แล้ว คุณจะเปรียบเทียบตำแหน่งนี้กับตำแหน่งร้านค้าได้
การทำเช่นนี้ด้วยคลาส
RouteMatrixในไลบรารีเส้นทาง, Maps JavaScript API (หรือฟีเจอร์
Compute Route
Matrix ใน Routes API) จะช่วยให้ผู้ใช้เลือกสถานที่ตั้งที่สะดวกที่สุดสำหรับตนเองได้ตามเวลาในการขับรถหรือระยะทางบนถนน
วิธีมาตรฐานในการจัดระเบียบรายการสถานที่คือการจัดเรียงตาม ระยะทาง โดยปกติแล้ว ระบบจะคำนวณระยะทางนี้โดยใช้เส้นตรงจากผู้ใช้ไปยังสถานที่ตั้ง แต่การทำเช่นนี้อาจทำให้เข้าใจผิดได้ เส้นตรงอาจ อยู่เหนือแม่น้ำที่ผ่านไม่ได้หรือผ่านถนนที่พลุกพล่านในเวลาที่ตำแหน่งอื่น อาจสะดวกกว่า การดำเนินการนี้มีความสำคัญเมื่อคุณมีสถานที่ตั้งหลายแห่ง ซึ่งอยู่ห่างกันไม่กี่กิโลเมตร
เมธอด RouteMatrix.computeRouteMatrix ทำงานโดยรับรายการต้นทางและปลายทาง แล้วส่งคืนไม่เพียงระยะทางการเดินทาง แต่ยังส่งคืนระยะเวลาเดินทางระหว่างต้นทางและปลายทางด้วย ในกรณีของผู้ใช้ ต้นทางคือตำแหน่งที่ผู้ใช้อยู่ในปัจจุบันหรือจุดเริ่มต้นที่ต้องการ และปลายทางคือตำแหน่งของสถานที่ คุณระบุต้นทางและปลายทางได้เป็น
คู่พิกัด รหัสสถานที่ หรือที่อยู่ คุณใช้
RouteMatrix.computeRouteMatrixร่วมกับค่ากำหนดการกำหนดเส้นทาง เช่น
TRAFFIC_AWARE เพื่อแสดงผลลัพธ์ตามเวลาขับรถปัจจุบันหรือในอนาคตได้
ตัวอย่างต่อไปนี้เรียกใช้ RouteMatrix.computeRouteMatrix ใน
ไลบรารีเส้นทาง, Maps JavaScript API โดยระบุต้นทางของผู้ใช้และสถานที่ตั้งร้านค้าได้สูงสุด 25 แห่ง
ในครั้งเดียว
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } 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(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
สำหรับสถานที่ตั้งที่อยู่ใกล้เคียงแต่ละแห่ง คุณจะแสดงสถานะสินค้าคงคลังของผลิตภัณฑ์ได้โดยอิงตาม ฐานข้อมูลสินค้าคงคลัง
แสดงข้อมูลร้านค้า
| ตัวอย่างนี้ใช้ Places Library, Maps JavaScript API | นอกจากนี้ยังมี Places SDK สำหรับ Android | Places SDK สำหรับ iOS | Places API (ใหม่) |
คุณสามารถแชร์รายละเอียดสถานที่ที่สมบูรณ์ เช่น ข้อมูลติดต่อ เวลาทำการ และสถานะการเปิดทำการปัจจุบัน เพื่อช่วยให้ลูกค้าเลือกสถานที่ที่ต้องการหรือ สรุปคำสั่งซื้อได้
หลังจากโทรหา Maps JavaScript API เพื่อรับรายละเอียดสถานที่ แล้ว คุณจะกรองและแสดงผลการตอบกลับได้
หากต้องการขอรายละเอียดสถานที่ คุณจะต้องมีรหัสสถานที่ของแต่ละสถานที่ ดูรับรหัสสถานที่เพื่อดึงรหัสสถานที่ของ สถานที่ตั้ง
คำขอรายละเอียดสถานที่ต่อไปนี้ใช้ คลาส Place เพื่อแสดงชื่อ พิกัด เว็บไซต์ หมายเลขโทรศัพท์ คะแนน และเวลาทำการสำหรับ รหัสสถานที่ของ Google ลอนดอน
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
ปรับปรุงเครื่องมือระบุตำแหน่งผลิตภัณฑ์
คุณสามารถปรับปรุงประสบการณ์ของผู้ใช้เพิ่มเติมได้ตามความต้องการของธุรกิจหรือผู้ใช้
แสดงเส้นทางในการนำทาง
| ตัวอย่างนี้ใช้ Routes Library, Maps JavaScript API | นอกจากนี้ยังมี Routes API บริการเว็บสำหรับใช้ใน Android และ iOS ไม่ว่าจะจากแอปพลิเคชันโดยตรงหรือจากระยะไกล ผ่านพร็อกซีเซิร์ฟเวอร์ |
เมื่อแสดงเส้นทางแก่ผู้ใช้จากภายในเว็บไซต์หรือแอปพลิเคชัน ผู้ใช้จะไม่ต้องออกจากเว็บไซต์และเสียสมาธิไปกับหน้าอื่นๆ หรือเห็นคู่แข่งบนแผนที่ นอกจากนี้ คุณยังใช้ Routes API เพื่อขอเส้นทางที่เป็นมิตรกับสิ่งแวดล้อมเพื่อประมาณการใช้เชื้อเพลิงหรือพลังงาน และแสดงผลกระทบต่อสิ่งแวดล้อมของ การเดินทางได้ด้วย
Route
คลาสใน Routes Library ของ Maps JavaScript API ยังมีเมธอดต่างๆ เช่น
createPolylines() และ
createWaypointAdvancedMarkers() ที่ช่วยให้คุณประมวลผลผลลัพธ์
และแสดงผลลัพธ์บนแผนที่ได้
ต่อไปนี้เป็นตัวอย่างการขอและแสดงเส้นทางบนแผนที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวอย่างได้ที่ รับเส้นทาง
ส่งเส้นทางไปยังอุปกรณ์เคลื่อนที่
คุณสามารถส่งลิงก์เส้นทางให้ผู้ใช้ทางข้อความหรืออีเมล เพื่อให้ผู้ใช้ไปยังสถานที่ตั้งได้ง่ายยิ่งขึ้น เมื่อคลิกลิงก์ดังกล่าว แอป 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พารามิเตอร์การค้นหาโดยใช้รูปแบบที่อยู่เดียวกับปลายทางได้ (ไม่บังคับ) แต่หากไม่ระบุ ระบบจะเริ่มเส้นทางจาก
ตำแหน่งปัจจุบันของผู้ใช้ ซึ่งอาจแตกต่างจากตำแหน่งที่ผู้ใช้ใช้
แอปตัวระบุตำแหน่งผลิตภัณฑ์ของคุณ
URL ของ Maps
มีตัวเลือกพารามิเตอร์การค้นหาเพิ่มเติม เช่น travelmode และ
dir_action=navigate เพื่อเปิดเส้นทางพร้อมเปิดการนำทาง
ลิงก์ที่คลิกได้นี้ ซึ่งขยาย URL ตัวอย่างก่อนหน้า จะตั้งค่า
origin เป็นสนามฟุตบอลในลอนดอนและใช้
travelmode=transit เพื่อแสดงเส้นทางขนส่งสาธารณะไปยัง
จุดหมาย
หากต้องการส่งข้อความหรืออีเมลที่มี URL นี้ เราขอแนะนำให้ใช้แอปพลิเคชันของบุคคลที่สาม เช่น twilio หากใช้ App Engine คุณสามารถใช้บริษัทบุคคลที่สามเพื่อส่งข้อความ SMS หรืออีเมลได้ ดูข้อมูลเพิ่มเติมได้ที่ การส่งข้อความด้วยบริการของบุคคลที่สาม
แสดงตำแหน่งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ
ใช้แผนที่แบบไดนามิก
| ตัวอย่างนี้ใช้ Maps JavaScript API | นอกจากนี้ยังมี Android | iOS |
เครื่องมือระบุตำแหน่งเป็นส่วนสำคัญของประสบการณ์ของผู้ใช้ อย่างไรก็ตาม บางเว็บไซต์อาจไม่มีแม้แต่แผนที่แบบง่ายๆ ทำให้ผู้ใช้ต้องออกจากเว็บไซต์หรือแอปเพื่อค้นหาสถานที่ใกล้เคียง ซึ่งหมายความว่าผู้ใช้จะได้รับประสบการณ์ที่ไม่ดีเท่าที่ควร เนื่องจากต้อง ไปยังหน้าต่างๆ เพื่อรับข้อมูลที่ต้องการ แต่คุณสามารถยกระดับประสบการณ์การใช้งานนี้ได้ด้วยการฝังและปรับแต่งแผนที่ลงในแอปพลิเคชัน
การเพิ่มแผนที่แบบไดนามิกลงในหน้าเว็บ ซึ่งก็คือแผนที่ที่ผู้ใช้สามารถเลื่อนไปมา ซูมเข้าและออก รวมถึงดูรายละเอียดเกี่ยวกับสถานที่ต่างๆ และจุดที่น่าสนใจ สามารถทำได้ด้วยโค้ดเพียงไม่กี่บรรทัด
ก่อนอื่น คุณต้องรวม Maps JavaScript API ไว้ในหน้าเว็บ
ซึ่งทำได้โดยการลิงก์สคริปต์ต่อไปนี้ในหน้า HTML รวมถึง
libraries=marker เพื่อให้คุณเพิ่มเครื่องหมายขั้นสูงลงในแผนที่ได้
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
สำหรับเครื่องระบุตำแหน่ง โดยปกติแล้วคุณจะสนใจในการตั้งค่าตำแหน่งเริ่มต้น จุดศูนย์กลางหรือขอบเขต และระดับการซูม (ระดับการซูมแผนที่ไปยังตำแหน่งนั้น) องค์ประกอบอื่นๆ ส่วนใหญ่ เช่น การปรับแต่งการควบคุม เป็นตัวเลือกที่คุณจะใช้หรือไม่ก็ได้ตามระดับการโต้ตอบกับแผนที่
ปรับแต่งแผนที่ของคุณ
คุณเปลี่ยนลักษณะและรายละเอียดของแผนที่ได้หลายวิธี ตัวอย่างเช่น คุณสามารถทำสิ่งต่อไปนี้ได้
- สร้างเครื่องหมายที่กำหนดเองเพื่อแทนที่หมุดในแผนที่เริ่มต้น
- เปลี่ยนสีของฟีเจอร์แผนที่ให้สอดคล้องกับแบรนด์
- ควบคุมจุดที่น่าสนใจที่คุณแสดง (สถานที่ท่องเที่ยว อาหาร ที่พัก และอื่นๆ) และระดับความหนาแน่น ซึ่งจะช่วยให้คุณมุ่งเน้นความสนใจของผู้ใช้ไปยังสถานที่ตั้งของคุณในขณะที่ไฮไลต์ สถานที่สำคัญที่ช่วยให้ผู้ใช้ไปยังสถานที่ตั้งที่ใกล้ที่สุดได้
สร้างเครื่องหมายบนแผนที่แบบกำหนดเอง
คุณปรับแต่งเครื่องหมายขั้นสูงได้โดยเปลี่ยนสีพื้นหลัง ขอบ หรือสีสัญลักษณ์ของหมุดเริ่มต้น (เช่น เพื่อระบุว่าสถานที่ตั้งเปิดอยู่หรือไม่) แทนที่เครื่องหมายด้วยรูปภาพกราฟิกที่กำหนดเอง เช่น โลโก้ของแบรนด์ หรือสร้างเครื่องหมาย HTML และ CSS ที่กำหนดเอง หน้าต่างข้อมูลหรือหน้าต่างป๊อปอัปสามารถให้ข้อมูลเพิ่มเติมแก่ผู้ใช้ เช่น เวลาทำการ หมายเลขโทรศัพท์ หรือรูปภาพ
ต่อไปนี้เป็นตัวอย่างแผนที่ที่ใช้เครื่องหมายกราฟิกที่กำหนดเอง (ดูซอร์สโค้ด ใน หัวข้อเครื่องหมายกราฟิกที่กำหนดเองของ 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
รวมข้อมูลตำแหน่งที่กำหนดเองกับรายละเอียดสถานที่
ส่วนแสดงสถานที่ตั้งของคุณบนแผนที่แบบอินเทอร์แอกทีฟ ก่อนหน้านี้อธิบายการใช้รายละเอียดสถานที่เพื่อมอบข้อมูลระดับสูงเกี่ยวกับสถานที่ตั้งของคุณให้แก่ผู้ใช้ เช่น เวลาทำการ รูปภาพ และรีวิว
การทำความเข้าใจระดับราคาและ SKU ของฟิลด์ข้อมูลต่างๆ ใน Places API (ใหม่) จะเป็นประโยชน์ หากต้องการจัดการค่าใช้จ่าย กลยุทธ์หนึ่งคือการรวมข้อมูลที่คุณมีอยู่แล้วเกี่ยวกับสถานที่ตั้งเข้ากับข้อมูลล่าสุดจาก Google Maps เช่น การปิดชั่วคราว เวลาทำการในวันหยุด รวมถึงการให้คะแนน รูปภาพ และรีวิวของผู้ใช้ หากมีข้อมูลติดต่อของร้านค้าอยู่แล้ว คุณก็ไม่จำเป็นต้องขอฟิลด์เหล่านั้นจากรายละเอียดสถานที่ และสามารถจำกัดมาสก์ฟิลด์เพื่อดึงเฉพาะฟิลด์ที่ต้องการแสดงได้
คุณอาจมีข้อมูลสถานที่ของคุณเองเพื่อใช้เสริมหรือใช้แทน รายละเอียดสถานที่ Codelab สำหรับเครื่องมือระบุตำแหน่งแบบฟูลสแต็กมีตัวอย่างการใช้ GeoJSON กับฐานข้อมูล เพื่อจัดเก็บและดึงรายละเอียดตำแหน่งของคุณเอง