Google Maps API Key 設定
Google Maps PlatformのAPIを利用する場合は、Google Maps API Key の取得が必須です。
APIキー不要
- GoogleマップのWeb画面 > 共有 > 地図を埋め込む から取得するiframeタグの埋め込み
APIキー必要
- API経由で動的にマップを表示
- 地図上にカスタムマーカーの表示、イベント処理
- 住所から緯度・経度を変換する
取得・設定手順
Google Maps APIキーを取得
Google Maps APIキーを取得するためには、あらかじめGoogleアカウントを取得しておく必要があります。
Google Maps APIキー取得に必要なもの
- Googleアカウント
- クレジットカード情報
-
Googleアカウントを準備します。
Google アカウントの作成（外部リンク） -
Googleアカウントの準備ができたら、以下のURLをクリックし、Google Maps Platformに移動。「使ってみる」をクリック。
今回はGoogle MapsのAPIキーを取得するので、「Maps」にチェックを入れて「CONTINUE」をクリックします。
Google Maps Platform（外部リンク）
- プロジェクトを選択。初めて取得する場合は「My Project」のみが表示されます。
適宜、プロジェクト名を設定し「NEXT」をクリックします。
- 「NEXT」ボタンをクリックすると、「請求の有効化」画面に切り替わります。
そのまま「請求先アカウントの作成」をクリックします。
- 無料トライアル画面に切り替わるので、必要な項目を設定し、「同意して続行」をクリックします。
※「最新情報をメールで受け取る」チェック項目に関しては、任意で設定してください
アカウントの情報から、「名前と住所」、「お支払いタイプ」「お支払い方法」まで設定してください。
Google Maps APIキーの利用は、マップへのアクセス数によって料金が変わります。
※ほとんどの利用者は無料枠内で利用可能
詳細は、次の公式記事を参照ください。
価格とプラン | Google Maps Platform（外部リンク）
- お支払い方法の登録が完了すると、APIが有効となったことを示すポップアップが表示されます。
- 「次へ」をクリックすると、あなたの「API Key」が表示されます。
この時点で、発行された「Google Maps Api Key」は使用できますが、セキュリティの観点から使用するドメインに制限をかけます。
「DONE」をクリックして設定を終了します。
取得したAPIキーのリファラ制限を設定
リファラ制限の設定は、「Google Cloud platform」のコンソール画面で行います。
コンソール画面では、使用しているAPIキーの状況を確認できます。
「OK」をクリックして、コンソール画面を開きます。
- 「新しいAPIキーを保護する必要があります。」と表示されていることを確認します。
- 「認証情報を保護」をクリックして、設定画面に切り替えます。
- 「HTTPリファラー（ウェブサイト）」にチェックを入れます。
- フォーム内の記述例を参考に、ワイルドカードを使用してあなたがGoogleMapを使用する予定のドメインを設定してください。
Geocoding API の有効化
パレットCMSでは、管理画面内で住所からマップ情報を取得する際、「緯度、経度」の取得も行っています。
そのため、取得した地図を表示する「Maps JavaScript API」に加えて、「緯度、経度」を取得する権限を持つ「Geocoding API」も有効にする必要があります。
Google Maps Platformのコンソール画面上で、左側のメニューから「API」をクリックします。
「使用中のAPI」と「未使用のAPI」が表示されます。未使用のAPIの「Geocoding API」をクリックします。
「Geocoding API」の詳細画面が表示されるので、「有効にする」をクリックします。
以上の設定で、今回取得した「Google Maps API Key」での必要な設定は完了です。
パレットCMSにAPIキーを設定
以上の手順より、Google Maps APIキーの取得ができたら、パレットCMS側で設定を行います。
システム設定 > サイト設定の「Google Maps API Key」の項目に、取得したAPIキーを設定してください。
APIキーの設定が完了すると、登録データの住所項目にGoogle Mapsを表示できるようになります。
※別途、項目側での動作設定が必要です
APIキーの設定確認（Google Chrome拡張機能）
Google Chromeにて、APIキーが正しく設定されているかをチェックする拡張機能 Google Maps Platform API Checker（外部リンク）が提供されています。
右上の青い「Chromeに追加」ボタンより機能を追加できます。
拡張機能追加後、Chromeブラウザで確認したいページを開きます。
画面右上のピンの色が「緑色」になっていれば、APIキーが正常に設定されています。
※ピンの色が赤やグレーの場合は、正しく設定されていない可能性があります。設定を再度ご確認ください