Android
執行 ApiDemos 範例應用程式
如要執行 ApiDemos 範例應用程式,請參閱 GitHub 範例 (Java | Kotlin),以及查看 CloudBasedMapStylingDemoActivity
操作示範 (Java | Kotlin)。
您可以參考 Java 和 Kotlin 範例應用程式,瞭解如何從雲端設定 Android 地圖的樣式。
已知問題
將應用程式發布給客戶後,您就可以透過 Google Cloud 控制台,為具備地圖 ID 的地圖更新自訂樣式。新樣式會在幾小時內反映在應用程式中。
為確保新的自訂樣式能立即顯示以供測試,請清除測試裝置上的應用程式資料。如要進一步瞭解如何清除裝置上的資料,請參閱 Android 說明中心的「釋出空間」一文。
請注意,相關設定可能因手機而有所不同。如需更多資訊,請洽詢您的裝置製造商。
iOS
執行 ApiDemos 範例應用程式
如要執行 ApiDemos 範例應用程式,請參閱 GitHub 範例 Google 地圖範例應用程式,以及查看 CloudBasedMapStylingViewController
專案 (Swift 的 GitHub 範例 | Objective-C)。
選用性的 CocoaPod 或 GitHub 雲端樣式示範
除了從頭開始,您也可以試用我們的 Objective-C 範例應用程式,瞭解如何從雲端設定 iOS 地圖的樣式。詳情請參閱 Objective-C 範例。
建構 Beta 版試用版應用程式
在 Xcode 中,按下編譯按鈕以建構並執行目前的配置。建構作業產生錯誤,提示您在 SDKDemoAPIKey.h
檔案中輸入 API 金鑰。
如果您尚未擁有 API 金鑰,請按照「取得 API 金鑰」一文中的操作說明,在 Cloud 控制台設定專案並取得 API 金鑰。在 Cloud 控制台設定金鑰時,您可以指定應用程式的軟體包 ID,確保只有應用程式可以使用金鑰。SDK 範例應用程式的預設軟體包 ID 為 com.example.GoogleMapsDemos
。
編輯 SDKDemoAPIKey.h
檔案,並將 API 金鑰貼到 kAPIKey 常數的定義中:
static NSString *const kAPIKey = @"YOUR_API_KEY";
如果 Xcode 提示您解鎖 SDKDemoAPIKey.h
檔案進行編輯,請選擇「Unlock」。
移除下列程式碼:
```
#error Register for API Key and insert here.
```
建構並執行專案。
雲端樣式設定地圖示範
CloudStyling
示範示範如何使用 Google Cloud 控制台上的樣式組合設定地圖樣式。
試用版應用程式啟動後,請在清單頂端的「Beta 版範例」部分中,按一下「地圖自訂」示範。
按一下「樣式地圖」,查看載入不同地圖 ID 後的效果。
您也可以嘗試自行新增樣式 (依序點選「樣式地圖」>「新增地圖 ID」),然後查看以自訂樣式化地圖顯示的地圖更新。
JavaScript
這是使用地圖 ID 載入自訂樣式地圖的基本範例。這種情況下,Maps JavaScript 會在載入地圖時參照地圖 ID 8e0a97af9386fef
,並自動套用與該地圖 ID 相關聯的地圖樣式。
TypeScript
function initMap(): void { new google.maps.Map( document.getElementById("map") as HTMLElement, { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, } as google.maps.MapOptions ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
測試範例程式碼
Maps Static API
地圖 ID 是指與特定地圖樣式或地圖項目相關聯的 ID。 您可以先設定地圖樣式,並將地圖樣式與 Google Cloud 控制台中的地圖 ID 建立關聯。 這樣一來,當您在程式碼中參照該地圖 ID 時,相關的地圖樣式就會顯示在應用程式中。後續的任何樣式更新也會自動顯示在應用程式中,客戶不需要進行任何更新。
如果您要使用雲端式地圖樣式設定,而現有地圖已經以
style
參數進行自訂,請務必移除這些地圖,以免與日後推出的功能發生衝突。如要在使用 Google Web API 的新地圖或現有地圖中加入地圖 ID,請附加
map_id
網址參數,並將其設為地圖 ID。這個範例說明如何使用 Maps Static API,在地圖中加入地圖 ID。<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" />