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

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 จะมีการเรียกเก็บเงินสำหรับ Dynamic Maps SKU โดยใช้รหัสแผนที่ สำหรับ Maps Static API การใช้รหัสแผนที่จะมีการเรียกเก็บค่าบริการจาก SKU ของแผนที่แบบคงที่

ตัวอย่าง

นี่คือตัวอย่างพื้นฐานของการโหลดแผนที่ที่มีการจัดรูปแบบที่กำหนดเองโดยใช้รหัสแผนที่ ในกรณีนี้ 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