ตัวอย่างเดิม

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

สร้างแอปเดโมรุ่นเบต้า

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

หากยังไม่มีคีย์ API ให้ตั้งค่าโปรเจ็กต์ใน Cloud Console และรับคีย์ API โดยทำตามวิธีการในหัวข้อรับคีย์ API เมื่อกำหนดค่าคีย์บน Cloud Console คุณจะระบุตัวระบุ Bundle ของแอปเพื่อให้แน่ใจว่ามีเพียงแอปของคุณเท่านั้นที่ใช้คีย์ได้ ตัวระบุชุดเริ่มต้นของแอปตัวอย่าง 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;
index.ts

JavaScript

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