จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

เมื่อสร้างแล้ว ID แผนที่จะเชื่อมโยงกับโปรเจ็กต์และจํากัดไว้เพียงแพลตฟอร์มเดียว (Android, iOS, JavaScript) หรือ Maps Static API เท่านั้น

หากต้องการสร้างหรือจัดการรหัสแผนที่ใน Cloud Console คุณต้องมีบทบาท IAM หรือเจ้าของโปรเจ็กต์

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

หากต้องการสร้างและจัดการรหัสแผนที่หรือรูปแบบแผนที่ในโปรเจ็กต์ Google Cloud คุณต้องเป็นบทบาทเจ้าของหรือผู้แก้ไข IAM ในโปรเจ็กต์

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

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

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

  1. ไปที่หน้าการจัดการ Maps ใน Cloud Console
  2. เลือกสร้างรหัสแผนที่ใหม่ เพื่อแสดงแบบฟอร์มสร้างรหัสแผนที่ใหม่
    สร้างรหัสแผนที่ใหม่

    โดยทําตามขั้นตอนต่อไปนี้

    • ระบุชื่อแผนที่
    • ระบุประเภทแผนที่หรือแพลตฟอร์ม
    • สําหรับแผนที่ JavaScript ให้เลือกประเภทแรสเตอร์หรือแผนที่เวกเตอร์
    • ป้อนคําอธิบายแผนที่
    • เลือกถัดไปเพื่อแสดงรหัสแผนที่ใหม่

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

คําแนะนําเหล่านี้สันนิษฐานว่ามีรูปแบบแผนที่ที่มีอยู่อย่างน้อย 1 รูปแบบในโปรเจ็กต์

  1. ไปที่หน้าการจัดการ Maps ใน Cloud Console
  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">YOUR_MAP_ID</string>
</resources>

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

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    class="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: "<YOUR 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:@"<YOUR MAP ID>"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

หากใช้รหัสแผนที่ของคุณเอง คุณสามารถตั้งค่ารหัสแผนที่ใน Cloud Console ให้มีรูปแบบใหม่ได้ทุกเมื่อ และสไตล์นั้นจะแสดงในมุมมองแผนที่ของคุณโดยอัตโนมัติสําหรับคุณและผู้ใช้ภายใน 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 แบบคงที่

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

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

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

ฟีเจอร์ที่มีให้บริการเมื่อใช้รหัสแผนที่

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

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