ใช้รหัสแผนที่
รหัสแผนที่คือตัวระบุที่เชื่อมโยงกับรูปแบบหรือองค์ประกอบแผนที่หนึ่งๆ กำหนดค่ารูปแบบแผนที่และเชื่อมโยงกับรหัสแผนที่ใน Google Cloud Console จากนั้น เมื่อคุณอ้างอิงรหัสแผนที่ในโค้ด รูปแบบแผนที่ที่เชื่อมโยงจะเป็น ที่แสดงในแอปของคุณ การอัปเดตสไตล์ที่ตามมาจะปรากฏในแอปโดยอัตโนมัติ โดยไม่จำเป็นต้องมีการอัปเดตใดๆ จากลูกค้า
เมื่อสร้าง รหัสแผนที่จะเชื่อมโยงกับโปรเจ็กต์ และ จำกัดเฉพาะแพลตฟอร์มเดียว (Android, iOS, JavaScript) หรือ Maps Static API
หากต้องการสร้างหรือจัดการรหัสแผนที่ใน Cloud Console ให้ทำดังนี้ ต้องมีโครงการ บทบาท IAM ของเจ้าของหรือผู้แก้ไขโปรเจ็กต์
สิทธิ์ที่จำเป็น
ในการสร้างหรือจัดการรหัสแผนที่หรือรูปแบบแผนที่ใน โปรเจ็กต์ Google Cloud ที่ให้ไว้คุณต้องกำหนด บทบาท IAM เจ้าของหรือผู้แก้ไข เกี่ยวกับโครงการ
สร้างรหัสแผนที่
รหัสแผนที่คือตัวระบุที่ไม่ซ้ำซึ่งแสดงถึงอินสแตนซ์เดี่ยวของ แผนที่ คุณสามารถสร้างรหัสแผนที่และอัปเดตรูปแบบที่เชื่อมโยงกับรหัสแผนที่ได้ทุกเมื่อ ใน Cloud Console
วิธีสร้างรหัสแผนที่
- ใน Cloud Console ให้ไปที่ส่วน หน้าการจัดการ Maps
- เลือกสร้างรหัสแผนที่ใหม่เพื่อแสดงเมนูสร้าง
แบบฟอร์มรหัสแผนที่ใหม่
ดำเนินการต่อไปนี้ในแบบฟอร์ม
- ระบุชื่อแผนที่
- ระบุประเภทแผนที่หรือแพลตฟอร์ม
- สำหรับแผนที่ JavaScript ให้เลือกประเภทแผนที่แบบแรสเตอร์หรือเวกเตอร์
- ป้อนคำอธิบายของแผนที่
- เลือกถัดไปเพื่อแสดงรหัสแผนที่ใหม่
เชื่อมโยงรหัสแผนที่กับรูปแบบแผนที่
คำสั่งเหล่านี้จะถือว่ามีรูปแบบแผนที่อยู่แล้วอย่างน้อย 1 รูปแบบในโปรเจ็กต์ของคุณ
- ใน Cloud Console ให้ไปที่ส่วน หน้าการจัดการ Maps
- ในหน้านี้ ให้เลือกรหัสแผนที่ที่มีอยู่จากคอลัมน์ชื่อแผนที่
- ที่ด้านล่างของแบบฟอร์มนี้ ให้เลือกรูปแบบแผนที่จากเมนูแบบเลื่อนลงรูปแบบแผนที่ที่เชื่อมโยงกับรหัสแผนที่นี้
- เลือกบันทึก
เพิ่มรหัสแผนที่ลงในแอป
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
หากต้องการสร้างอินสแตนซ์แผนที่โดยใช้รหัสแผนที่ ให้ทำดังนี้
- สร้าง
GMSMapID
ด้วยสตริงรหัสแผนที่จาก Cloud Console - สร้าง
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
วิธีสร้างแผนที่ด้วยรหัสแผนที่ในรหัสแอปพลิเคชันของคุณ
หากคุณกำลังปรับแต่งแผนที่ด้วยโค้ด JSON ที่ฝังไว้ ให้ลบ พร็อพเพอร์ตี้
styles
จากออบเจ็กต์MapOptions
ของคุณ ไม่เช่นนั้น ให้ข้ามขั้นตอนนี้เพิ่มรหัสแผนที่ลงในแผนที่โดยใช้พร็อพเพอร์ตี้
mapId
เช่น
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
แผนที่แบบคงที่
ในการเพิ่มรหัสแผนที่ลงในแผนที่ใหม่หรือที่มีอยู่ซึ่งใช้หนึ่งใน
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" />
ฟีเจอร์ที่ใช้ได้เมื่อใช้รหัสแผนที่
การจัดรูปแบบแผนที่ในระบบคลาวด์: จัดรูปแบบ ปรับแต่ง และจัดการแผนที่โดยใช้ Google Cloud Console
พร้อมใช้งานในทุกแพลตฟอร์ม (Android, JavaScript, iOS และ Maps Static API)
แผนที่เวกเตอร์: แผนที่ที่ประกอบด้วยชิ้นส่วนที่ใช้เวกเตอร์ ซึ่งวาดเมื่อโหลด
ที่ฝั่งไคลเอ็นต์โดยใช้ WebGL
พร้อมใช้งานใน JavaScript