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