Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

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

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

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

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

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

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

Android 3D

ตั้งค่าพร็อพเพอร์ตี้ mapId String ใน Map3DOptions โดยโปรแกรมหรือใช้แอตทริบิวต์เลย์เอาต์ ระบบจะระบุ Map3DOptions ให้กับออบเจ็กต์ Map3DView ระหว่างการสร้างอินสแตนซ์ และจะเปลี่ยนแปลงไม่ได้หลังจากสร้าง Map3DView แล้ว

เพิ่มรหัสแผนที่โดยสร้างแผนที่โดยโปรแกรม ดังนี้

import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode

class MainActivity : Activity(), OnMap3DViewReadyCallback {
  fun onCreate(...) {
    val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
    val map3DView = Map3DView(context, map3DOptions)
    map3DView.getMap3dViewAsync(this)
  }
}

เพิ่มรหัสแผนที่โดยใช้แอตทริบิวต์เลย์เอาต์ ดังนี้

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:map3d="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent" android:layout_height="match_parent">
 <com.google.android.gms.maps3d.Map3DView
     android:id="@+id/map3dView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     map3d:mode="hybrid"
     map3d:mapId="MAP_ID"/>
</LinearLayout>

iOS

หากต้องการสร้างอินสแตนซ์แผนที่โดยใช้รหัสแผนที่ ให้ทำดังนี้

สร้าง GMSMapID ด้วยสตริงรหัสแผนที่จากคอนโซล Cloud
สร้าง 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 ชั่วโมง

หากต้องการดูการเปลี่ยนแปลงทันที คุณสามารถปิดและรีสตาร์ทแอปได้โดยออกจากแอป บังคับให้แอปหยุดทำงานจากรายการแอปที่ใช้ล่าสุด แล้วเปิดแอปอีกครั้ง จากนั้นคุณจะเห็นแผนที่ที่อัปเดต

iOS 3D

นักพัฒนาแอป iOS สามารถตั้งค่าตัวแก้ไข style ใหม่ใน Map ได้ ตัวแก้ไขนี้ยอมรับรหัสแผนที่และ Closure ที่จะเรียกใช้เมื่อรหัสแผนที่ไม่ถูกต้องหรือไม่พบ (ไม่บังคับ)

import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
        latitude: 0.0,
        longitude: 0.0,
      ),
      mode: .hybrid
    )
    .style(
      with: "MAP_ID",
      error: {
        // Handle styling error.
      }
    )
    // Could also use trailing closure syntax
    //  .style(with: "MAP_ID") {
    //     // Handle styling error.
    //  }
  }
}

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'
});

Javascript 3D

หากต้องการสร้างแผนที่ด้วยรหัสแผนที่ในแอปพลิเคชัน ให้เพิ่มรหัสแผนที่ลงในแผนที่โดยใช้พร็อพเพอร์ตี้ mapId ตัวอย่าง

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();index.js

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 Static ก่อนที่จะเพิ่มรหัสแผนที่ คุณจะต้องสร้าง และเพิ่มลายเซ็นดิจิทัลใหม่หลังจากเพิ่มรหัสแผนที่ เมื่อสร้างคีย์ลับลงนาม URL ใหม่ อย่าลบลายเซ็นดิจิทัลก่อนหน้าออกจาก URL