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

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

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

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

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

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

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

สร้างรหัสแผนที่ใน Cloud Console โดยทำตามขั้นตอนต่อไปนี้

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

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

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

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

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

    1. ในส่วนชื่อ ให้ตั้งชื่อรหัสแผนที่
    2. ไม่บังคับ: ในส่วนคำอธิบาย ให้ระบุวัตถุประสงค์การใช้งานรหัสแผนที่
    3. ในส่วนประเภทแผนที่ ให้เลือกแพลตฟอร์มที่คุณวางแผนจะใช้รหัสแผนที่ หากเลือก JavaScript ให้เลือกประเภทแผนที่แรสเตอร์ (ค่าเริ่มต้น) หรือเวกเตอร์ ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับแผนที่เวกเตอร์ได้ที่ แผนที่เวกเตอร์
    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:map="http://schemas.android.com/apk/res-auto"
    ....
    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 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 Static

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

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

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