การจัดรูปแบบแผนที่ในระบบคลาวด์

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 สำหรับ Android¹, Maps SDK สำหรับ iOS, JavaScript และ Maps Static API แต่บางแพลตฟอร์มก็ไม่มีบางฟีเจอร์

ก่อนเริ่มต้น

• สร้างรหัสแผนที่
  หากต้องการใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ คุณต้องโหลดแผนที่โดยใช้รหัสแผนที่
• อัปเดตจากการจัดรูปแบบแบบฮาร์ดโค้ด ก่อนที่จะเพิ่มรหัสแผนที่เพื่อใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ในแผนที่ที่มีอยู่ซึ่งปรับแต่งด้วยการจัดรูปแบบแบบฮาร์ดโค้ด เช่น พารามิเตอร์การค้นหาของ JSON หรือ URL ให้นำสไตล์แบบฮาร์ดโค้ดออกเพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้นกับฟีเจอร์ในอนาคต คุณนำเข้าการจัดรูปแบบ JSON ไปยังรูปแบบแผนที่ใหม่ได้
  • ใน Android ให้อัปเดต MapStyleOptions
  • อัปเดตชั้นเรียน GMSMapStyle ใน iOS
  • ใน JavaScript ให้นำการจัดรูปแบบ MapTypeStyle ออก
  • ใน Maps Static ให้นำพารามิเตอร์ style ออก

การเรียกเก็บเงิน

การใช้การจัดสไตล์แผนที่บนระบบคลาวด์ต้องใช้รหัสแผนที่ ใน 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 เมื่อแผนที่โหลด และใช้รูปแบบแผนที่ในปัจจุบันที่เชื่อมโยงกับรหัสแผนที่นั้นโดยอัตโนมัติ

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;
index.ts

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
index.js

Maps Static API

รหัสแผนที่คือตัวระบุที่เชื่อมโยงกับรูปแบบหรือฟีเจอร์แผนที่หนึ่งๆ กำหนดค่ารูปแบบแผนที่และเชื่อมโยงกับรหัสแผนที่ใน Google Cloud Console จากนั้น เมื่อคุณอ้างอิงรหัสแผนที่ในโค้ด รูปแบบแผนที่ที่เชื่อมโยงจะแสดงในแอป การอัปเดตรูปแบบที่คุณทำในภายหลังจะปรากฏในแอปโดยอัตโนมัติ โดยที่ลูกค้าไม่ต้องอัปเดต

1. หากคุณใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับแผนที่ที่มีอยู่ซึ่งปรับแต่งด้วยพารามิเตอร์ style อย่าลืมนำแผนที่ดังกล่าวออกเพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้นกับฟังก์ชันการทำงานในอนาคต

2. หากต้องการเพิ่มรหัสแผนที่ลงในแผนที่ใหม่หรือที่มีอยู่ซึ่งใช้เว็บ 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" />