ใช้รหัสแผนที่
รหัสแผนที่คือตัวระบุที่เชื่อมโยงกับรูปแบบหรือจุดสนใจของแผนที่หนึ่งๆ กำหนดค่ารูปแบบแผนที่และเชื่อมโยงกับรหัสแผนที่ใน Google Cloud Console จากนั้นเมื่อคุณอ้างอิงรหัสแผนที่ในโค้ด รูปแบบแผนที่ที่เกี่ยวข้องจะแสดงในแอป การอัปเดตรูปแบบครั้งต่อๆ ไปของคุณจะปรากฏในแอปโดยอัตโนมัติโดยที่ลูกค้าไม่ต้องอัปเดตใดๆ
เมื่อสร้างเสร็จแล้ว ระบบจะเชื่อมโยงรหัสแผนที่กับโปรเจ็กต์และจํากัดไว้ที่แพลตฟอร์มเดียว (Android, iOS, JavaScript) หรือ Maps Static API
หากต้องการสร้างหรือจัดการรหัสแผนที่ใน Cloud Console คุณต้องมีบทบาท IAM สำหรับเจ้าของโปรเจ็กต์หรือผู้ผู้แก้ไขโปรเจ็กต์
สิทธิ์ที่จำเป็น
หากต้องการสร้างหรือจัดการรหัสแผนที่หรือรูปแบบการแมปในโปรเจ็กต์ Google Cloud ที่กำหนด คุณต้องถือบทบาท IAM เจ้าของหรือผู้แก้ไขในโปรเจ็กต์ดังกล่าว
สร้างรหัสแผนที่
รหัสแผนที่คือตัวระบุที่ไม่ซ้ำกันซึ่งแสดงถึงอินสแตนซ์เดี่ยวของ Google Maps คุณสร้างรหัสแผนที่และอัปเดตรูปแบบที่เชื่อมโยงกับรหัสแผนที่ได้ทุกเมื่อใน 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