高度なマーカー(プレビュー版)をセットアップする手順は次のとおりです。
API キーを取得して Maps JavaScript API を有効化する
高度なマーカー(プレビュー版)を使用するには、請求先アカウントが登録された Cloud プロジェクトを用意し、Maps JavaScript API を有効化しておく必要があります。詳しくは、Google Cloud プロジェクトをセットアップするをご覧ください。
マップ ID を作成する
新しいマップ ID を作成するには、クラウドのカスタマイズに記載されている手順に従います。地図のタイプを [JavaScript] に設定し、[ベクター] または [ラスター] を選択します。
地図の初期化コードを更新する
これには、作成したマップ ID が必要です。作成したマップ ID は [マップ管理] ページで確認できます。
API の
script
タグで、v=beta
とlibraries=marker
を使用します。以下に例を示します。<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=marker&callback=initMap"></script>
mapId
プロパティを使用して地図をインスタンス化する際に、マップ ID を指定します。実際のマップ ID でも、DEMO_MAP_ID
でもかまいません。const map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'YOUR_MAP_ID' });
地図の機能をチェックする(任意)
高度なマーカーを使用するにはマップ ID が必要です。マップ ID がなかったり、渡されたマップ ID が無効だったりすると、高度なマーカーを読み込めません。トラブルシューティング用のステップとして、mapcapabilities_changed
リスナーを追加して、地図の機能の変化を把握することも可能です。これによって、次の条件が満たされているかどうかを確認できます。
- 有効なマップ ID が使用されていること。
- マップ ID がベクター地図と関連付けられていること(ベクター地図を必要とする機能が使用されている場合)。
地図の機能の使用は任意で、テスティングやトラブルシューティング、あるいはランタイム フォールバック用としてのみ推奨されます。
// Optional: subscribe to map capability changes. map.addListener('mapcapabilities_changed', () => { const mapCapabilities = map.getMapCapabilities(); if (!mapCapabilities.isAdvancedMarkersAvailable) { // Advanced markers are *not* available, add a fallback. } });