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

เลือกแพลตฟอร์ม: Android iOS JavaScript บริการเว็บ

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 แต่บางแพลตฟอร์มอาจไม่แสดงฟีเจอร์

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

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

การใช้การจัดรูปแบบแผนที่ในระบบคลาวด์ต้องใช้รหัสแผนที่ ใน Maps SDK สำหรับ Android, Maps SDK สำหรับ iOS และ JavaScript จะมีการเรียกเก็บเงินสำหรับ Dynamic Maps SKU โดยใช้รหัสแผนที่ สำหรับ Maps Static API การใช้รหัสแผนที่จะมีการเรียกเก็บค่าบริการจาก SKU ของแผนที่แบบคงที่

ตัวอย่าง

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

ลองใช้ตัวอย่าง


  1. การจัดรูปแบบแผนที่ในระบบคลาวด์ไม่พร้อมใช้งานในโหมด Android Lite