地図（Google Maps）の設定、追加、変更 | 操作マニュアル
サイトの概要が入ります。サイトの概要が入ります。サイトの概要が入ります。サイトの概要が入ります。

操作マニュアル

2011.02.23

地図（Google Maps）の設定、追加、変更

Google MapsモジュールのAPIの設定

Google Mapsでは、Google Maps Platformで提供される2つのAPIタイプ「Embed」・「Dynamic Maps」を設定することができます。それぞれのAPIタイプの違いは下表をご確認ください。なお、「Dynamic Maps」は月額無料枠（200ドル分まで）を超えると、使用量に応じて課金対象となりますので、ご注意ください。

Google MapsモジュールのAPIタイプによる違い
APIタイプ
Embed
Dynamic Maps
機能制限
一部機能制限あり
※位置の調整、自動的に緯度経度取得、吹き出しコメントを設定することができません。
 機能制限なし
月額無料枠
（200ドル分）		 無制限（無料） 28,000 loadsまで
※月額無料枠内は正常に地図表示されます。
有料枠 無制限（無料）

月額無料枠を超えると使用量に応じた料金体系で請求が発生
※月額無料枠を超えると地図表示エラーとなります。
※月額無料枠を超えた場合でも正常に地図表示をする場合は、使用量に基づく請求を有効にする必要があります。【注1】
APIの設定 APIの設定方法はこちら APIの設定方法はこちら

【注1】Google Mapsは2018年7月11日よりGoogle Maps Platformとしてサービス提供されるよう変更となりました。この変更に伴いまして、2018年7月16日より使用量に応じた料金体系により提供されるよう変更となっております。なお、Google Mapsは外部サービスとなりますので、Google Cloud Platformに対する料金および請求に関しましては、下記のページをご確認いただきますようお願い申し上げます。
→料金体系について（外部サイト：Google Cloud Platform）
→価格と請求に関する変更について（外部サイト：Google Cloud Platform）

APIタイプ=Embedを利用する設定

APIタイプ「Embed」は、別途APIキーを取得せずに利用することができます。「Embed」には一部機能制限がありますので、ご注意ください。
【機能制限】位置の調整、自動的に緯度経度取得、吹き出しコメントを設定することができません。

  1. コントロールパネルの[管理] → [Google Maps]を選択します。
  2. “Google Mapsダイアログ”が表示されます。APIキーを空欄に設定して[保存]ボタンをクリックします。
    ※APIキーが空欄の場合は、「API Key」と表示されます。

    ※“Google Mapsダイアログ”のすべての地図がAPIタイプ「Embed」に切り替わります。
APIタイプ=Dynamic Mapsを利用する設定

APIタイプ「Dynamic Maps」は、Google Cloud PlatformでAPIキーを取得し、“Google Mapsダイアログ”にAPIキーを設定することで利用することができます。なお、「Dynamic Maps」は月額無料枠（200ドル分まで）を超えると、使用量に応じて課金対象となりますので、ご注意ください。
→Google MapsモジュールのAPIタイプによる違い

1.Google Cloud PlatformでAPIキーを取得
  1. コントロールパネルの[管理] → [Google Maps]を選択します。
  2. “Google Mapsダイアログ”が表示されますので、表示されているGoogle Cloud PlatformのAPIダッシュボードのURL（https://console.cloud.google.com/apis/）にアクセスし、APIを取得するGoogleアカウントでログインします。
    ※「利用規約の更新」が表示される場合は、利用規約をご確認の上、「すべてのサービスと関連 API について、適用される利用規約を遵守して利用することに同意します。」を「はい」に設定し、同意します。
  3. Google Cloud PlatformのAPIダッシュボードが表示されますので、[プロジェクトの選択]をクリックします。
  4. プロジェクトの選択画面の[新しいプロジェクト]をクリックします。
  5. 任意のプロジェクト名を入力し、[作成]をクリックします。
  6. 作成したプロジェクトを選択し、サイドナビゲーションの[APIとサービス] → [ダッシュボード]を選択します。ダッシュボード画面が表示されたら[APIとサービスの有効化]をクリックします。
  7. APIライブラリ画面が表示されたら、フィルタ条件の「Maps」をクリックします。
  8. 有効にするAPIは、「Geocoding API」と「Maps JavaScript API」です。はじめに「Geocoding API」をクリックし、[有効にする]をクリックします。

    ↓
  9. 「Geocoding API」の管理画面が表示されたら、サイドナビゲーションの[API]をクリックすると、使用中のAPIと未使用のAPIが表示されます。未使用のAPIの中から「Maps JavaScript API」をクリックし、[有効にする]をクリックします。

    ↓
  10. サイドナビゲーションから[APIとサービス] → [認証情報]を選択します。
  11. 認証情報画面の[認証情報を作成]をクリックし、さらに選択肢から[APIキー]をクリックします。
  12. 「APIキーを作成しました」とメッセージが表示されたら、APIキーが作成されます。不正利用を回避する設定を行うため、[キーを制限]をクリックします。
  13. キーの制限の【アプリケーションの制限】タブ、および【APIの制限】タブを設定し、上部の「APIキー」控えて[保存]をクリックします。
    ※設定が有効になるまで、最大5分かかることがありますので、サイトへの反映は時間をおいてからご確認ください。
    【アプリケーションの制限】タブ

    • アプリケーション制限
      なし
      ※「HTTPリファラー（ウェブサイト）」を選択している場合は住所の自動取得ができずエラーとなりますので、「なし」を選択してください。
    【APIの制限】タブ

    • APIの制限
      「Geocoding API」と「Maps JavaScript API」を追加
  14. Google Cloud Platformの作業は終了です。上記13で控えておいた「APIキー」は次の手順で使用します。
2.ダイアログへのAPIキーの保存
  1. コントロールパネルの[管理] → [Google Maps]を選択します。
  2. “Google Mapsダイアログ”が表示されます。APIの取得の手順13で控えておいた「APIキー」を「APIキー」項目に入力して[保存]ボタンをクリックします。

    ※“Google Mapsダイアログ”のすべての地図がAPIタイプ「Dynamic Maps」に切り替わります。

地図（Google Maps）の設定

ブロックレイアウトで配置できるGoogle Mapsの地図を作成します。

  1. コントロールパネルの[管理] → [Google Maps]を選択します。
  2. “Google Mapsダイアログ”が表示されます。新しく地図を追加する場合は［追加］ボタン をクリックします。すでに追加されている地図を編集する場合は［編集］ボタンを、削除する場合は［削除］ボタンをクリックしてください。
  3. ダイアログの必要項目を入力します。
    【Embedの場合】
    ※住所の「自動的に緯度経度取得を行う」機能、「吹き出しコメント」は使用できません。

    • タイトル
      ダイアログの一覧等に表示されるその地図の名前を入力します。
      ※「'（シングルクォーテーション）」はご使用いただけません。
    • 住所
      アイコンを表示したい場所の住所を入力します。漢数字は使用できません。都道府県名、ビル・建物名は任意で入力してください。
      ※「自動的に緯度経度取得を行う」はEmbedでは使用できません。
    • 縮尺
      地図の縮尺サイズを設定します。
    • サイズ
      地図の表示サイズを単位（「%」か「px」）も含めて入力します。
      例：幅100%,高さ350px
    • 地図下コメント
      地図の下に表示するテキストを入力します。アクセスルートなど、必要に応じて任意の内容を入力してください。
    【Dynamic Mapsの場合】

    • タイトル
      ダイアログの一覧等に表示されるその地図の名前を入力します。
      ※「'（シングルクォーテーション）」はご使用いただけません。
    • 住所
      アイコンを表示したい場所の住所を入力します。漢数字は使用できません。都道府県名、ビル・建物名は任意で入力してください。
      ※「自動的に緯度経度取得を行う」はEmbedでは使用できません。
    • 縮尺
      地図の縮尺サイズを設定します。
    • サイズ
      地図の表示サイズを単位（「%」か「px」）も含めて入力します。
      例：幅100%,高さ350px
    • 吹き出しコメント
      地図上のアイコンをクリックしたときに表示される吹き出し内のコメントを入力します。組織名や住所など、任意の内容を入力してください。
      ※「吹き出しコメント」はEmbedでは使用できません。
    • 地図下コメント
      地図の下に表示するテキストを入力します。アクセスルートなど、必要に応じて任意の内容を入力してください。
  4. [ＯＫ]ボタンをクリックして完了です。

地図（Google Maps）の追加

ページ内に作成した地図を配置したい場合は、コンテンツパーツの追加（【その他】タブ）、またはブロックレイアウトで該当する地図を配置してください。

地図（Google Maps）の変更

追加と同じ方法で“Google Mapsダイアログ”を表示させて、該当地図の右側にある［編集］ボタンをクリックするか、変更したい地図を配置したページを表示させ、変更したい地図の上で右クリックをして表示されたショートカットメニューから[Google Maps] → [プロパティ]を選択して“Google Mapsダイアログ”を表示させます。

アイコンの位置調整

場合によっては、ダイアログで入力した住所と少し異なる位置にアイコンが表示されることがあります。その場合は、アイコンの位置調整を行う必要があります。
※位置の調整はEmbedでは使用できません。

  1. 変更したい地図を配置したページを表示させます。
  2. アイコンを変更したい地図の上で右クリックをして表示されたショートカットメニューから[Google Maps] → [位置の調整]を選択します。
  3. アイコンをドラッグして正しい位置まで持っていき、ドロップしてください。この時、アイコンの下に表示される×マークの位置がアイコンが表示される位置になります。
  4. [保存する]ボタンを押して完了です。
  • by 初期管理者
  • 10:25
表示：PC