ใช้รหัสแผนที่

รหัสแผนที่คือตัวระบุที่ไม่ซ้ำกันซึ่งใช้เพื่อแสดงอินสแตนซ์เดียวของ Google Maps คุณใช้รหัสแผนที่เพื่อเปิดใช้ฟีเจอร์ หรือจัดการหรือกำหนดรูปแบบแผนที่ในเว็บไซต์และแอปพลิเคชัน คุณสามารถสร้างรหัสแผนที่สำหรับแต่ละแพลตฟอร์มที่ต้องการได้ ไม่ว่าจะเป็น JavaScript, Android, iOS หรือแผนที่แบบคงที่ ในโปรเจ็กต์ Google Cloud Console ในหน้าการจัดการแผนที่

สิ่งที่คุณทำได้ด้วยรหัสแผนที่

ใช้รหัสแผนที่เพื่อเปิดใช้ฟีเจอร์และการจัดรูปแบบ ตัวอย่างวิธีใช้รหัสแผนที่มีดังนี้ ดูรายการทั้งหมดได้ที่ฟีเจอร์ที่ใช้รหัสแผนที่

  • การจัดรูปแบบแผนที่ในระบบคลาวด์: เชื่อมโยงรหัสแผนที่กับรูปแบบแผนที่เพื่อจัดรูปแบบ ปรับแต่ง และจัดการแผนที่โดยใช้ Google Cloud Console พร้อมใช้งานบนทุกแพลตฟอร์ม ได้แก่ JavaScript, Android, iOS และ Maps Static API

  • แผนที่เวกเตอร์: ใช้รหัสแผนที่เพื่อใช้แผนที่ที่ประกอบด้วยไทล์แบบเวกเตอร์ซึ่งวาดขึ้นเมื่อโหลดฝั่งไคลเอ็นต์โดยใช้ WebGL พร้อมใช้งานใน JavaScript

  • เครื่องหมายขั้นสูง: ใช้รหัสแผนที่เพื่อเปิดใช้เครื่องหมายขั้นสูง พร้อมใช้งานใน JavaScript, Android และ iOS

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

หากต้องการใช้การจัดรูปแบบแผนที่ในระบบคลาวด์เพื่อจัดรูปแบบแผนที่ในเว็บไซต์และแอป Android ให้ทำตามขั้นตอนต่อไปนี้

  1. สร้างรหัสการแมปสําหรับแต่ละแพลตฟอร์มที่คุณใช้ เช่น สร้างรหัส JavaScript และรหัสแผนที่ Android โปรดดูรายละเอียดที่หัวข้อสร้างรหัสแผนที่

  2. กำหนดค่ารูปแบบแผนที่ใน Google Cloud Console โปรดดูรายละเอียดที่หัวข้อการจัดรูปแบบแผนที่ในระบบคลาวด์

  3. เชื่อมโยงรหัสแผนที่ทั้ง 2 รายการกับรูปแบบแผนที่ใน Google Cloud Console โปรดดูรายละเอียดที่หัวข้อเชื่อมโยงรหัสแมปกับรูปแบบ

  4. อ้างอิงรหัสแผนที่ใน JavaScript ของเว็บไซต์และโค้ดแอป Android โปรดดูรายละเอียดที่หัวข้อเพิ่มรหัสแผนที่ลงในแอป

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

ฟีเจอร์ที่ใช้รหัสแผนที่

ตารางต่อไปนี้แสดงฟีเจอร์และ API ของ Google Maps Platform ที่ใช้รหัสแผนที่

ฟีเจอร์หรือ API ใช้รหัสแผนที่เพื่อบรรลุเป้าหมายเหล่านี้
เครื่องหมายขั้นสูง เปิดใช้เครื่องหมายขั้นสูง คุณไม่จําเป็นต้องสร้างรหัสแผนที่ และใช้รหัสแผนที่เดโม "DEMO_MAP_ID" แทนได้
การจัดรูปแบบตามข้อมูลสําหรับขอบเขต เชื่อมโยงรหัสแผนที่กับชุดขอบเขตและการจัดรูปแบบเพื่อจัดรูปแบบแผนที่ตามขอบเขต
การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูล เชื่อมโยงรหัสแผนที่กับชุดข้อมูลและการจัดรูปแบบเพื่อจัดรูปแบบแผนที่ตามชุดข้อมูล
Flutter จัดสไตล์ Google Maps ที่ใช้ในแอป Flutter
Maps Embed API ระบุและจัดรูปแบบแผนที่ที่จะฝังในหน้าเว็บ
Maps JavaScript API จัดรูปแบบแผนที่ที่จะแสดงในหน้าเว็บ
Maps SDK สำหรับ Android จัดรูปแบบแผนที่ที่จะแสดงในแอปพลิเคชัน Android1
Maps SDK สําหรับ iOS จัดสไตล์แผนที่ที่จะแสดงในแอปพลิเคชัน iOS1
Maps Static API ระบุและจัดรูปแบบแผนที่ให้แสดงผลเป็นภาพนิ่ง
โซลูชันการเคลื่อนย้าย ใช้ Maps JavaScript API และ SDK สำหรับ Android และ iOS เพื่อกำหนดสไตล์แผนที่ในโซลูชันการเคลื่อนที่1
WebGL (แผนที่เวกเตอร์) เปิดใช้ฟีเจอร์ WebGL โดยใช้รหัสแผนที่เวกเตอร์ JavaScript

1 การใช้รหัสแผนที่ใน Maps SDK สำหรับ Android หรือ Maps SDK สำหรับ iOS จะทริกเกอร์การโหลดแผนที่ซึ่งระบบจะเรียกเก็บเงินจาก SKU แผนที่แบบไดนามิก

วิธีสร้างและใช้รหัสแผนที่

รหัสแผนที่คือตัวระบุที่ไม่ซ้ำกันซึ่งแสดงถึงอินสแตนซ์เดียวของ Google Map คุณสร้างรหัสแผนที่และอัปเดตรูปแบบแผนที่ที่เชื่อมโยงกับรหัสแผนที่ในคอนโซลระบบคลาวด์

สิทธิ์ที่จำเป็น

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

สร้างรหัสแผนที่

คุณสร้างรหัสแผนที่และอัปเดตรูปแบบที่เชื่อมโยงกับรหัสแผนที่ได้ทุกเมื่อในคอนโซลระบบคลาวด์

วิธีสร้างรหัสแผนที่

  1. ลงชื่อเข้าใช้และเปิดโปรเจ็กต์ Cloud Console ที่มีสิทธิ์ที่จําเป็น

  2. ใน Cloud Console ให้ไปที่หน้าการจัดการ Maps

  3. เลือกสร้างรหัสแผนที่

    สร้างรหัสแผนที่ใหม่

  4. ในหน้าสร้างรหัสแผนที่ใหม่ ให้ทำดังนี้

    1. ตั้งชื่อรหัสแผนที่ในส่วนชื่อ
    2. ไม่บังคับ: ในส่วนคําอธิบาย ให้อธิบายว่าใช้รหัสแผนที่เพื่ออะไร
    3. ในส่วนประเภทแผนที่ ให้เลือกแพลตฟอร์มที่คุณวางแผนจะใช้รหัสแผนที่ หากเลือก JavaScript ให้เลือกประเภทแผนที่ Raster (ค่าเริ่มต้น) หรือ Vector ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับแผนที่เวกเตอร์ได้ที่แผนที่เวกเตอร์
    4. เลือกบันทึกเพื่อแสดงรหัสแผนที่ใหม่

เชื่อมโยงรหัสแผนที่กับรูปแบบแผนที่

วิธีการเหล่านี้จะถือว่ามีสไตล์แผนที่อย่างน้อย 1 สไตล์ในโปรเจ็กต์ หากไม่มีรูปแบบแผนที่ โปรดดูรูปแบบแผนที่ที่ทำงานบนระบบคลาวด์ แล้วเลือกแพลตฟอร์มเพื่อดูวิธีการสร้าง

  1. ใน Cloud Console ให้ไปที่หน้าการจัดการ Maps
  2. เลือกรหัสแผนที่ที่มีอยู่จากตาราง
  3. เลือกรูปแบบแผนที่ในส่วนรูปแบบแผนที่ที่เชื่อมโยง

  4. เลือกบันทึก

    หน้ารายละเอียดของรหัสแผนที่ที่คุณเชื่อมโยงรูปแบบแผนที่

เพิ่มรหัสแผนที่ลงในแอป

Android

เพิ่มรหัสแผนที่ผ่านองค์ประกอบ <fragment> ในไฟล์เลย์เอาต์ของกิจกรรม โดยใช้คลาส MapView หรือใช้คลาส GoogleMapOptions แบบเป็นโปรแกรม

ตัวอย่างเช่น สมมติว่าคุณสร้างรหัสแผนที่ที่จัดเก็บเป็นค่าสตริงชื่อ map_id ใน res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

สําหรับแผนที่ที่เพิ่มผ่านองค์ประกอบ <fragment> ในไฟล์เลย์เอาต์ของกิจกรรม ข้อมูลโค้ดแผนที่ทั้งหมดที่ควรมีสไตล์ที่กําหนดเองต้องระบุรหัสแผนที่ในแอตทริบิวต์ map:mapId ดังนี้

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

คุณยังใช้แอตทริบิวต์ map:mapId ของคลาส MapView เพื่อระบุรหัสแผนที่ได้ด้วย โดยทำดังนี้

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

หากต้องการระบุรหัสแผนที่แบบเป็นโปรแกรม ให้ส่งรหัสนั้นไปยังอินสแตนซ์ MapFragment โดยใช้คลาส GoogleMapOptions ดังนี้

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

ใน Android Studio ให้สร้างและเรียกใช้แอปตามปกติ รูปแบบที่กำหนดเองซึ่งกำหนดค่าไว้ในขั้นตอนแรกจะมีผลกับแผนที่ทั้งหมดที่มีรหัสแผนที่ที่ระบุ

iOS

หากต้องการสร้างอินสแตนซ์แผนที่โดยใช้รหัสแผนที่ ให้ทําดังนี้

  1. สร้าง GMSMapID ด้วยสตริงรหัสแผนที่จาก Cloud Console
  2. สร้าง GMSMapView โดยระบุรหัสแผนที่ที่คุณเพิ่งสร้าง

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

หากใช้รหัสแผนที่ของคุณเอง คุณสามารถตั้งค่ารหัสแผนที่ในคอนโซลระบบคลาวด์ให้มีสไตล์ใหม่ได้ทุกเมื่อ และสไตล์นั้นจะแสดงในมุมมองแผนที่โดยอัตโนมัติสำหรับคุณและผู้ใช้ภายในเวลาประมาณ 6 ชั่วโมง

หากต้องการดูการเปลี่ยนแปลงทันที ให้ปิดและรีสตาร์ทแอปโดยออกจากแอป บังคับให้แอปออกจากรายการแอปที่ใช้ล่าสุด แล้วเปิดแอปอีกครั้ง จากนั้นแผนที่ที่อัปเดตแล้วจะปรากฏขึ้น

JavaScript

วิธีสร้างแผนที่ที่มีรหัสแผนที่ในโค้ดแอปพลิเคชัน

  1. หากคุณปรับแต่งแผนที่ด้วยโค้ด JSON ที่ฝังไว้อยู่แล้ว ให้นําพร็อพเพอร์ตี้ styles ออกจากออบเจ็กต์ MapOptions หรือจะข้ามขั้นตอนนี้ก็ได้

  2. เพิ่มรหัสแผนที่ลงในแผนที่โดยใช้พร็อพเพอร์ตี้ mapId เช่น

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

Maps Static

หากต้องการเพิ่มรหัสแผนที่ลงในแผนที่ใหม่หรือแผนที่ที่มีอยู่ซึ่งใช้ API ของบริการเว็บของเรา ให้เพิ่มพารามิเตอร์ map_id URL ต่อท้ายและตั้งค่าเป็นรหัสแผนที่ ตัวอย่างนี้แสดงการเพิ่มรหัสแผนที่ลงในแผนที่โดยใช้ 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=MAP_ID&signature=YOUR_SIGNATURE" />

แผนที่ที่กําหนดศูนย์กลางเป็นสะพานบรูคลินในนครนิวยอร์ก รัฐนิวยอร์ก สหรัฐอเมริกา พร้อมการควบคุมแผนที่ที่มุมขวาล่าง แผนที่จะแสดงถนน น้ำ และพื้นดินในสไตล์ที่กำหนดเอง

หากมีลายเซ็นดิจิทัลใน URL แบบคงที่ของ Maps ก่อนเพิ่มรหัสแผนที่ คุณจะต้องสร้างและเพิ่มลายเซ็นดิจิทัลใหม่หลังจากเพิ่มรหัสแผนที่ เมื่อสร้างข้อมูลลับสำหรับการลงนาม URL ใหม่ อย่าลืมนำลายเซ็นดิจิทัลก่อนหน้าออกจาก URL