Google Maps Platform มีฟีเจอร์การจัดรูปแบบแผนที่บนระบบคลาวด์ที่ทำให้จัดรูปแบบ ปรับแต่ง และจัดการแผนที่ได้ง่ายๆ โดยใช้ Google Cloud Console ซึ่งคุณสามารถสร้างประสบการณ์แผนที่ที่กำหนดเองสำหรับผู้ใช้โดยไม่ต้องอัปเดตโค้ดของแอปทุกครั้งที่คุณเปลี่ยนแปลงรูปแบบ
รูปแบบที่สร้างขึ้นก่อนวันที่ 15 กันยายน 2020 จะไม่แสดงฟีเจอร์ธรรมชาติที่ปรับปรุงแล้วของ Google Maps ในการใช้คุณลักษณะแผนที่ที่เพิ่มประสิทธิภาพแล้วของ Google Maps สำหรับการจัดรูปแบบแผนที่ คุณต้องสร้างรูปแบบแผนที่
การจัดรูปแบบแผนที่ในระบบคลาวด์ช่วยให้คุณสร้างและแก้ไขรูปแบบแผนที่สำหรับแอปที่ใช้ Google Maps ได้โดยไม่ต้องเปลี่ยนแปลงโค้ดหลังจากที่มีรหัสแผนที่แล้ว การเปลี่ยนแปลงสไตล์ทั้งหมดทำได้ใน Cloud Console โดยไม่ต้องมีทักษะการเขียนโค้ด เปลี่ยนลักษณะและสีขององค์ประกอบแผนที่หลายอย่าง เช่น ถนน อาคาร แหล่งน้ำ จุดสนใจ และเส้นทางขนส่งสาธารณะ
รวมถึงฟีเจอร์ต่อไปนี้
- การจัดรูปแบบแผนที่ในระบบคลาวด์: แทนที่จะจัดรูปแบบแผนที่เป็นโค้ดด้วย JSON ให้จัดการและจัดรูปแบบแผนที่แบบไดนามิกหรือแบบคงที่ใน Cloud Console โดยใช้รหัสแผนที่และรูปแบบแผนที่
- แผนที่เวกเตอร์: นักพัฒนาซอฟต์แวร์ JavaScript สามารถเลือกใช้แผนที่แบบเวกเตอร์ที่เร่งความเร็วด้วย WebGL แบบเดียวกับที่มีอยู่ใน maps.google.com โดยตรงในเว็บแอป
- การกรองจุดที่น่าสนใจของธุรกิจ: คุณเลือกนำจุดสนใจของธุรกิจออกจากการแสดงแผนที่ได้ 5 หมวดหมู่
- การควบคุมความหนาแน่นของจุดที่น่าสนใจ: ความหนาแน่นของจุดสนใจที่แสดงบนแผนที่ฐานสามารถปรับให้แสดงจุดสนใจมากขึ้นหรือน้อยลงได้โดยค่าเริ่มต้น
แม้ว่ารูปแบบแผนที่ในระบบคลาวด์จะใช้งานได้ใน Maps SDK สำหรับ Android1, Maps SDK สำหรับ iOS, JavaScript และ Maps Static API แต่บางแพลตฟอร์มก็ไม่มีบางฟีเจอร์
ก่อนเริ่มต้น
- สร้างรหัสแผนที่
หากต้องการใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ คุณต้องโหลดแผนที่โดยใช้รหัสแผนที่ - อัปเดตจากการจัดรูปแบบแบบฮาร์ดโค้ด
ก่อนที่จะเพิ่มรหัสแผนที่เพื่อใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ในแผนที่ที่มีอยู่ซึ่งปรับแต่งด้วยการจัดรูปแบบแบบฮาร์ดโค้ด เช่น พารามิเตอร์การค้นหาของ JSON หรือ URL ให้นำสไตล์แบบฮาร์ดโค้ดออกเพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้นกับฟีเจอร์ในอนาคต คุณนำเข้าการจัดรูปแบบ JSON ไปยังรูปแบบแผนที่ใหม่ได้
- ใน Android ให้อัปเดต
MapStyleOptions
- อัปเดตชั้นเรียน
GMSMapStyle
ใน iOS - ใน JavaScript ให้นำการจัดรูปแบบ
MapTypeStyle
ออก - ใน Maps Static ให้นำพารามิเตอร์
style
ออก
- ใน Android ให้อัปเดต
หากต้องการการจัดรูปแบบแผนที่ในระบบคลาวด์ คุณต้องใช้ Maps SDK สำหรับ Android เวอร์ชัน 18.0.0 ขึ้นไป และใช้ตัวแสดงผล Maps SDK สำหรับ Android เวอร์ชันล่าสุด
การเรียกเก็บเงิน
การใช้การจัดสไตล์แผนที่บนระบบคลาวด์ต้องใช้รหัสแผนที่ ใน Maps SDK สำหรับ Android, Maps SDK สำหรับ iOS และ JavaScript การใช้รหัสแผนที่จะมีการเรียกเก็บเงินตาม SKU ของแผนที่แบบไดนามิก ใน Maps Static API การใช้รหัสแผนที่จะมีการเรียกเก็บเงินกับ SKU ของแผนที่แบบคงที่
ตัวอย่าง
Android
เรียกใช้แอปตัวอย่างของ ApiDemos
หากต้องการเรียกใช้แอปตัวอย่างของ ApiDemos โปรดดูตัวอย่าง GitHub
(Java
| Kotlin)
และดูการสาธิต CloudBasedMapStylingDemoActivity
(Java
| Kotlin)
คุณสามารถค้นหาแอปพลิเคชันตัวอย่าง Java และ Kotlin ที่สาธิตวิธีจัดรูปแบบแผนที่ Android ของคุณจากระบบคลาวด์ได้
ปัญหาที่ทราบ
เมื่อมีการนำส่งแอปให้ลูกค้าแล้ว คุณจะอัปเดตรูปแบบที่กำหนดเองสำหรับแผนที่ที่มีรหัสแผนที่ได้จาก Google Cloud Console สไตล์ใหม่นี้ จะแสดงในแอปในอีกไม่กี่ชั่วโมง
หากต้องการให้สไตล์ที่กำหนดเองใหม่แสดงขึ้นทันทีสำหรับวัตถุประสงค์ในการทดสอบ ให้ล้างข้อมูลแอปออกจากอุปกรณ์ทดสอบ ดูข้อมูลเพิ่มเติมเกี่ยวกับการล้างข้อมูลออกจากอุปกรณ์ได้ที่ความช่วยเหลือสำหรับ Android - เพิ่มพื้นที่ว่าง
โปรดทราบว่าการตั้งค่าอาจแตกต่างกันไปตามโทรศัพท์แต่ละรุ่น สำหรับข้อมูลเพิ่มเติม โปรดติดต่อผู้ผลิตอุปกรณ์ของคุณ
iOS
เรียกใช้แอปตัวอย่างของ ApiDemos
หากต้องการเรียกใช้แอปตัวอย่างของ ApiDemos โปรดดูตัวอย่าง GitHub
แอป Google Maps ตัวอย่าง
และดูโปรเจ็กต์ CloudBasedMapStylingViewController
(ตัวอย่าง GitHub สำหรับ
Swift
| Objective-C)
การสาธิต CocoaPod หรือ GitHub สำหรับการจัดรูปแบบระบบคลาวด์ที่ไม่บังคับ
แทนที่จะต้องเริ่มใหม่ตั้งแต่ต้น คุณสามารถลองแอปพลิเคชันตัวอย่าง Objective-C ที่สาธิตวิธีจัดรูปแบบแผนที่ iOS จากระบบคลาวด์ได้ที่นี่
สร้างแอปเดโมรุ่นเบต้า
ใน Xcode ให้กดปุ่มคอมไพล์เพื่อสร้างแล้วเรียกใช้รูปแบบปัจจุบัน
บิลด์จะแสดงข้อผิดพลาดซึ่งทำให้คุณป้อนคีย์ API ในไฟล์ SDKDemoAPIKey.h
หากยังไม่มีคีย์ API ให้ทำตามวิธีการเหล่านี้เพื่อตั้งค่าโปรเจ็กต์ใน Cloud Console และรับคีย์ API เมื่อกำหนดค่าคีย์บน Cloud Console คุณจะระบุตัวระบุแพ็กเกจของแอปเพื่อดูแลให้มีเพียงแอปของคุณเท่านั้นที่ใช้คีย์ได้ ตัวระบุแพ็กเกจเริ่มต้นของแอปตัวอย่าง SDK คือ com.example.GoogleMapsDemos
แก้ไขไฟล์ SDKDemoAPIKey.h
และวางคีย์ API ลงในคำจำกัดความของค่าคงที่ kAPIKey ดังนี้
```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```
หาก Xcode แจ้งให้คุณปลดล็อกไฟล์ SDKDemoAPIKey.h
เพื่อแก้ไข ให้เลือกปลดล็อก
นำบรรทัดต่อไปนี้ออก
```
#error Register for API Key and insert here.
```
สร้างและเรียกใช้โปรเจ็กต์
การสาธิตแผนที่การจัดรูปแบบแผนที่ในระบบคลาวด์
การสาธิต CloudStyling
แสดงวิธีจัดรูปแบบแผนที่โดยใช้ชุดรูปแบบบน Google Cloud Console
เมื่อแอปพลิเคชันการสาธิตเปิดใช้งาน ให้คลิกที่เดโมการปรับแต่งแผนที่ในส่วนตัวอย่างรุ่นเบต้าที่ด้านบนของรายการ
คลิกที่แผนที่รูปแบบเพื่อดูผลของการโหลดรหัสแผนที่ต่างๆ
คุณสามารถลองเพิ่มรูปแบบของคุณเองได้เช่นกัน ("แผนที่รูปแบบ" > "เพิ่มรหัสแผนที่ใหม่") และดูการอัปเดตแผนที่ด้วยแผนที่รูปแบบที่คุณกำหนดเอง
JavaScript
นี่คือตัวอย่างพื้นฐานของการโหลดแผนที่ที่มีการจัดรูปแบบแบบกำหนดเองโดยใช้รหัสแผนที่ ในกรณีนี้ Maps JavaScript จะอ้างอิงรหัสแผนที่ 8e0a97af9386fef
เมื่อแผนที่โหลด และใช้รูปแบบแผนที่ในปัจจุบันที่เชื่อมโยงกับรหัสแผนที่นั้นโดยอัตโนมัติ
TypeScript
function initMap(): void { new google.maps.Map( document.getElementById("map") as HTMLElement, { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, } as google.maps.MapOptions ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
ลองใช้ตัวอย่าง
Maps Static API
รหัสแผนที่คือตัวระบุที่เชื่อมโยงกับรูปแบบหรือฟีเจอร์แผนที่หนึ่งๆ กำหนดค่ารูปแบบแผนที่และเชื่อมโยงกับรหัสแผนที่ใน Google Cloud Console จากนั้น เมื่อคุณอ้างอิงรหัสแผนที่ในโค้ด รูปแบบแผนที่ที่เชื่อมโยงจะแสดงในแอป การอัปเดตรูปแบบที่คุณทำในภายหลังจะปรากฏในแอปโดยอัตโนมัติ โดยที่ลูกค้าไม่ต้องอัปเดต
หากคุณใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับแผนที่ที่มีอยู่ซึ่งปรับแต่งด้วยพารามิเตอร์
style
อย่าลืมนำแผนที่ดังกล่าวออกเพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้นกับฟังก์ชันการทำงานในอนาคตหากต้องการเพิ่มรหัสแผนที่ลงในแผนที่ใหม่หรือที่มีอยู่ซึ่งใช้เว็บ API ตัวใดตัวหนึ่งของเรา ให้เพิ่มพารามิเตอร์ของ URL
map_id
แล้วตั้งเป็นรหัสแผนที่ของคุณ ตัวอย่างนี้แสดงการเพิ่มรหัสแผนที่ลงในแผนที่โดยใช้ Maps Static API<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
-
การจัดรูปแบบแผนที่ในระบบคลาวด์ไม่พร้อมใช้งานในโหมด Android Lite↩