コンテンツページで地図を使いたい場面があります。
- 施設紹介
- 学校紹介
- 店舗周辺のコインパーキングの案内
地図を埋め込むための専用のブロックはありませんが、GoogleマップとHTMLブロックを使用することで、ページに地図を埋め込むことができます。
地図を設置する手順は以下の通りです。
- Googleマップでの作業
-
- Gooleマップで場所を検索する
- 埋め込みコードを取得する
- デザイン編集ページでの作業
-
- デザイン編集ページにHTMLブロックを追加する
- HTMLブロックに2.で取得した埋め込みコードを貼り付ける
-
Googleマップを開きます。
左上の検索ボックスに目的地の施設名や住所を入力し、場所を検索します。
-
場所が存在した場合、左側にその場所の情報が表示されるので、[share共有]をクリックします。
地図上に表示されている地名・施設名をクリックすることでも、場所を指定することができます。
住所がわからない場所、施設名などがない場所の場合は、以下の手順で指定できます。
-
地図上で該当の場所を見つけて右クリックします。
メニューが表示されるので、[この場所について]をクリックします。
-
地図の一番下に、右クリックした地点の情報が小さい吹き出しで表示されます。
吹き出しの中に緯度と経度が表示されているのでクリックします。
-
左側にその地点の情報が表示されます。
-
[share共有]をクリックすると、共有に関するポップアップが表示されます。
まず[地図を埋め込む]というタブをクリックします。
続いて[HTMLをコピー]をクリックして、埋め込みコードをコピーします。
[中]と表示されている箇所をクリックすると、埋め込む地図のサイズを変更できます。
サイズを変更すると埋め込みコードが変わるので、埋め込みコードのコピーはサイズ変更後に行うようにします。
以上でGoogleマップの埋め込みコードの取得が完了しました。
続いてドリームXのデザイン編集ページに移動して作業を進めます。
デザイン編集ページでは、HTMLブロックを追加し、そこに取得した埋め込みコードを設定します。
HTMLブロックは2種類あるので、いずれかのHTMLブロックを追加して設定します。
ブロックの操作方法については、ページ編集編の[
ブロック操作]をご確認ください。
- HTML入力ブロック
-
表示領域の横幅はヘッダーのメニュー全体と同じです。
地図が表示領域より小さい場合、左寄せになります。
- カラムブロック内のHTMLブロック
-
カラムブロック内に埋め込む場合に使用します。
1カラムで設定した場合は、HTML入力ブロックと同様の表示になります。
- HTML入力ブロック
-
-
デザイン編集ページ左上の[ブロック追加]をクリックします。
-
右側にブロック追加のメニューが表示されるので、[装飾]カテゴリを選択し、HTML入力ブロックを追加します。
-
追加したHTML入力ブロックをクリックすると、右側にHTML入力欄が表示されるので、Googleマップから取得した埋め込みコードを貼り付け、上の[保存]をクリックします。
- カラムブロック内のHTMLブロック
-
-
デザイン編集ページ左上の[ブロック追加]をクリックします。
-
右側にブロック追加のメニューが表示されるので、カラムブロックを追加します。
-
追加したカラムブロックをクリックして、カラムレイアウトの選択と、ブロックを追加するカラムの選択を行います。
[カラム内ブロック追加]をクリックすると、カラム内に追加可能なブロックの一覧が表示されるので、[HTML]をクリックします。
-
追加したHTMLブロックをクリックすると、右側にHTML入力欄が表示されるので、Googleマップから取得した埋め込みコードを貼り付け、上の[保存]をクリックします。
Googleマップから取得した埋め込みコードでは、埋め込んだ際に以下の問題があります。
- 表示サイズが固定されているため、場合によっては画面や表示領域からはみ出してしまう
- 縮尺が固定されている
これらの問題は、埋め込みコードを手動で書き換えることで対応が可能です（2019年12月時点）。
書き換えの際、入力欄の右下にある斜線部分をドラッグすると入力欄の大きさを変更できるので、必要に応じて変更してください。
埋め込みコードの書き換えを間違ってしまうと、地図が正常に表示されなくなってしまう可能性があります。
正常に表示されなくなった場合は、埋め込みコードの設定をやり直してください。
- 画面内に収まるようにする
-
埋め込みコードの中に、[width="○○○"]と表記されている箇所があります。
この数値が地図の横幅のサイズになります。
上の画像では600になっているので、地図の横幅が600pxとなり、画面幅や表示領域が600pxより狭い場合には地図がはみ出してしまうということになります。
この数値の部分を[width="100%"]に変更することで、表示領域に合わせて自動的に横幅のサイズが変更されるようになります。
[100%]は半角で入力します。
- 縮尺を変更する
-
埋め込みコードの中に、[!4f13.1]と表記されている箇所があります。
この[13.1]の部分が縮尺を表しています。
1～180の範囲で指定でき、数値が小さいほど拡大して表示されます。
数値は半角で入力します。
数値を5にした場合
数値を10にした場合
ページ編集編へ戻る