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

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

ฟีเจอร์แบบชำระเงิน: ฟังก์ชันการทำงานที่เข้าถึงได้โดยการใส่รหัสแผนที่จะทริกเกอร์การโหลดแผนที่ซึ่งจะเรียกเก็บเงินจาก SKU แผนที่แบบไดนามิกสำหรับ Android และ iOS ดูข้อมูลเพิ่มเติมที่การเรียกเก็บเงินของ Google Maps

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

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

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

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

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

สร้างรหัสแผนที่ในคอนโซลระบบคลาวด์โดยทำตามขั้นตอนต่อไปนี้

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

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

3. คลิกสร้างรหัสแผนที่

   

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

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

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