[ウェブサービス系パーツ]Google Mapを貼り付ける

Google Mapを貼り付けて、場所の案内などに使うことができます。

Google Mapのご利用にはGoogleの埋め込みタグを組み込む方法と、Googleが提供するAPIキーを利用する方法があります。

APIキーを利用する場合、地図のデザインカスタマイズが可能ですが、表示数に制限があります。
1アカウントにつき1ヶ月に「28,500」まで無料で地図の表示が可能となりますが、それ以上のアクセスが発生する場合有料課金となるため、クレジットカードの登録が必要です。
APIキーの取得方法についてはこちらを参照してください。

初期設定を行う

ブロックエディタ画面でウェブサービス系パーツ内の〈Googleマップ〉を選択します。
Google Map

設定方法を選択する

Mapの設定方法を選択し、〈次へ〉をクリックします。
[ウェブサービス系パーツ]Google Mapを貼り付ける

スタイル・マップを選んだ場合のみ、〈テンプレートデザイン〉を選択し、〈次へ〉をクリックします。
[ウェブサービス系パーツ]Google Mapを貼り付ける

地図を編集する

地図の表示場所、表示倍率やサイズなどを設定します。地図上をドラッグすると、表示する場所を移動できます。

[ウェブサービス系パーツ]Google Mapを貼り付ける

〈検索〉

地図で表示する場所を検索します。

〈サイズ〉

地図の表示サイズを設定します。

〈地図〉/〈航空写真〉

地図と航空写真のどちらを表示するかを切り替えます。

ズーム

スライダをドラッグして地図の表示倍率を調整します。

json

別のブロックや、サイトで設定したGoogleマップデータのインポート、エクスポートができます。
カスタマイズしたデータをインポートすることで、様々なデザインのGoogleマップを簡単にコピーすることが可能です。

スタイルの編集

地図上に配置するテキストやアイコンなどのスタイルを編集できます。

地図の編集を確定する

地図のサイズなどが決まったら〈次へ〉をクリックします。

[ウェブサービス系パーツ]Google Mapを貼り付ける

(スタイル・マップ選択の場合)APIキーを入力する

APIキーを入力し[1]、〈次へ〉をクリックします[2]。
[ウェブサービス系パーツ]Google Mapを貼り付ける

設定を確認する

設定内容を確認し、〈適用〉をクリックします。
[ウェブサービス系パーツ]Google Mapを貼り付ける

ブロックエディタにGoogle Styled Mapが貼り付けられますので、〈適用〉をクリックします。
[ウェブサービス系パーツ]Google Mapを貼り付ける