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

Google Maps Platform นําเสนอคุณลักษณะการจัดรูปแบบของแผนที่บนระบบคลาวด์ที่ช่วยให้คุณจัดรูปแบบ กําหนดค่า และจัดการแผนที่ได้อย่างง่ายดายโดยใช้ Google Cloud Console ซึ่งช่วยให้คุณสามารถสร้างประสบการณ์แผนที่แบบกําหนดเองสําหรับผู้ใช้ โดยไม่ต้องอัปเดตโค้ดของแอปทุกครั้งที่คุณทําการเปลี่ยนแปลงรูปแบบ

สไตล์ที่สร้างก่อนวันที่ 15 กันยายน 2020 จะไม่แสดงฟีเจอร์ทางธรรมชาติที่ปรับปรุงแล้วของ Google Maps หากต้องการใช้บริการแผนที่แบบปรับปรุงประสิทธิภาพตามธรรมชาติของ Google แผนที่ คุณต้องสร้างรูปแบบแผนที่

สไตล์แผนที่ในระบบคลาวด์ช่วยให้คุณสร้างและแก้ไขรูปแบบแผนที่สําหรับแอปใดก็ตามที่ใช้ Google Maps ได้โดยไม่ต้องเปลี่ยนแปลงโค้ดเมื่อรหัสแผนที่พร้อมใช้งานแล้ว คุณจะเปลี่ยนแปลงสไตล์ทั้งหมดได้ใน Cloud Console โดยไม่ต้องใช้ทักษะการเขียนโค้ด เปลี่ยนรูปลักษณ์และสีของส่วนประกอบแผนที่จํานวนมาก เช่น ถนน อาคาร แหล่งน้ํา จุดสนใจ และเส้นทางการขนส่งสาธารณะ

รวมถึงฟีเจอร์ต่อไปนี้

• การจัดรูปแบบแผนที่โดยใช้ระบบคลาวด์: แทนที่จะจัดรูปแบบแผนที่ในโค้ดโดยใช้ JSON ให้จัดการและจัดรูปแบบแผนที่แบบไดนามิกหรือแบบคงที่ใน Cloud Console โดยใช้รหัสแผนที่และรูปแบบแผนที่
• แผนที่เวกเตอร์: นักพัฒนาซอฟต์แวร์ JavaScript สามารถเลือกใช้แผนที่ซึ่งอิงตามเวกเตอร์ที่เร่งความเร็วโดย WebGL ซึ่งอยู่ใน maps.google.com โดยตรงในเว็บแอปของตัวเอง
• การกรองจุดที่น่าสนใจของธุรกิจ: คุณลบจุดสนใจ 5 หมวดหมู่ออกจากการแสดงแผนที่ได้
• การควบคุมความหนาแน่นของจุดที่น่าสนใจ: ความหนาแน่นของจุดสนใจที่แสดงในแผนที่ฐานจะปรับเปลี่ยนได้เพื่อแสดงจุดสนใจมากขึ้นหรือน้อยลงโดยค่าเริ่มต้น

แม้ว่าแผนที่ในรูปแบบระบบคลาวด์จะพร้อมใช้งานใน Maps SDK สําหรับ Android¹, Maps SDK สําหรับ iOS, JavaScript และ API แบบคงที่ของแผนที่ แต่บางฟีเจอร์อาจไม่มีให้บริการในบางแพลตฟอร์ม

ข้อควรทราบก่อนที่จะเริ่มต้น

• สร้างรหัสแผนที่
  หากต้องการใช้รูปแบบแผนที่ในระบบคลาวด์ คุณจะต้องโหลดแผนที่โดยใช้รหัสแผนที่
• ย้ายข้อมูลจากรูปแบบที่ใช้ฮาร์ดโค้ด
  ก่อนเพิ่มรหัสแผนที่เพื่อใช้การจัดรูปแบบแผนที่บนระบบคลาวด์ ที่มีอยู่บนแผนที่ซึ่งปรับแต่งด้วยรูปแบบฮาร์ดโค้ด เช่น พารามิเตอร์การค้นหาแบบ JSON หรือ URL เราขอแนะนําให้คุณลบการจัดรูปแบบที่ฮาร์ดโค้ดออกเพื่อหลีกเลี่ยง ความขัดแย้งที่อาจเกิดขึ้นกับฟังก์ชันการทํางานในอนาคต คุณนําเข้าการจัดรูปแบบ JSON ไปยังรูปแบบแผนที่ใหม่ได้
  • ใน Android ให้อัปเดต MapStyleOptions
  • ใน iOS ให้อัปเดต GMSMapStyle class
  • ใน 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 สไตล์ใหม่จะแสดงในแอปของคุณภายใน 2-3 ชั่วโมง

เพื่อให้ข้อมูลแอปรูปแบบใหม่ๆ ปรากฏขึ้นในทันทีเพื่อวัตถุประสงค์ในการทดสอบ ให้ล้างข้อมูลแอปจากอุปกรณ์ทดสอบ สําหรับข้อมูลเพิ่มเติมเกี่ยวกับการล้างข้อมูลจากอุปกรณ์ โปรดดู ความช่วยเหลือของ Android - เพิ่มพื้นที่ว่าง

โปรดทราบว่าการตั้งค่าอาจแตกต่างกันไปตามโทรศัพท์แต่ละรุ่น สําหรับข้อมูลเพิ่มเติม โปรดติดต่อผู้ผลิตอุปกรณ์

iOS

เรียกใช้แอปตัวอย่าง ApiDemos

หากต้องการเรียกใช้แอปตัวอย่างของ ApiDemos ให้ดูตัวอย่าง GitHub แอปตัวอย่าง GoogleMap และดูโปรเจ็กต์ CloudBasedMapStylingViewController (ตัวอย่าง GitHub สําหรับ Swift | Objective-C)

การสาธิต Cloud Styling 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 เพื่อแก้ไข ให้เลือก Unlock

นําบรรทัดต่อไปนี้ออก

```
#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" />