オンライン献金もできるようにしました!(4/6)

【制作5】Googleマップを埋め込む方法

教会ホームページにGoogleマップを埋め込む方法を解説します。

教会ホームページに地図を載せる方法はいくつかありますが、きょういち!では、現在一般的なGoogleマップを埋め込む方法を使っています。

手描きのイラストや、地図のスクリーンショットを載せる、といった教会もあります。

 

全体像の確認

簡単3ステップです。

作業時間は5分ほどかと思います。

GoogleマップでHTMLをコピーする
ホームページに載せる場所を確認して、HTMLを差し替える
サイズを調整して、実際の表示を確認する

 

【架空教会01】でGoogleマップを埋め込む

Step1:GoogleマップでHTMLをコピーする

架空教会01、02、03、共通の作業になります。

画像を見ながら確認してみてください。

 

埋め込みたい教会や住所を入力して、場所を指定します。

なかほどにある「共有」ボタンをクリックします。

Googleマップの埋め込み方法その①埋め込みたい教会や住所を入力して、そのページに飛びます。そこから「共有」ボタンをクリックします。

 

「地図を埋め込む」をクリックします。

Googleマップの埋め込み方法その②

 

デフォルトのサイズは「中」になっています。

そのまま「HTMLをコピー」をクリックします。(クリックするだけでコピーされています)

Googleマップの埋め込み方法その③

 

Step2:ホームページに載せる場所を確認して、HTMLを差し替える

架空教会01では、ホーム(トップページ)をスクロールしていくと、下のほうに「アクセス」と書いてあるところがあります。

 

架空教会01の管理画面からログイン→固定ページ→ホーム

 

下にスクロールしていくと、「アクセス」という項目があります。

ここの、「カスタムHTMLコード(アルファベットがたくさん並んでいる)ブロック)」を選択します。

 

「ブロック内のコード(たくさんアルファベットが並んでいるところ)」を適当にクリック→Ctrl+Aでブロック内のコードを全て選択してください。

 

 

→Ctrl+Vで貼り付け(ペースト)ができます。

Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

 

Step3:サイズを調整して、実際の表示を確認する

→最後に、コード内のサイズを変更します

width=”600″→width=”800“(「中」を選択した場合、600→800に)
height=”450″→height=”450″(「中」を選択していた場合は変更ナシ)

更新ボタンを押して、実際の表示を確認してみてください!

 

【架空教会02】でGoogleマップを埋め込む

Step1:グーグルマップで埋め込む地図を選ぶ

架空教会01、02、03、共通の作業になります。

埋め込みたい教会や住所を入力して、場所を指定します。

なかほどにある「共有」ボタンをクリックします。

Googleマップの埋め込み方法その①埋め込みたい教会や住所を入力して、そのページに飛びます。そこから「共有」ボタンをクリックします。

 

「地図を埋め込む」をクリックします。

Googleマップの埋め込み方法その②

デフォルトのサイズは「中」になっています。

そのまま「HTMLをコピー」をクリックします。(クリックだけでコピー済み)

Googleマップの埋め込み方法その③

 

Step2:ホームページに載せる場所を確認して、HTMLを差し替える

架空教会02では、「アクセス」のページにあります。

 

架空教会02の管理画面からログイン→固定ページ→アクセス

 

アクセス>カスタムHTMLブロック(たくさんアルファベットが並んでいるブロック)を選択

 

コード内を適当にクリックしてカーソルを置く→Ctrl+A(全選択)→Ctrl+V(Googleマップの埋め込みコードをペースト)

Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

完成です!更新ボタンを押して、実際の表示を確認してみてください!

 

【架空教会03】でGoogleマップを埋め込む

Step1:グーグルマップで埋め込む地図を選ぶ

架空教会01、02、03、共通の作業になります。

埋め込みたい教会や住所を入力して、場所を指定します。

なかほどにある「共有」ボタンをクリックします。

Googleマップの埋め込み方法その①埋め込みたい教会や住所を入力して、そのページに飛びます。そこから「共有」ボタンをクリックします。

 

「地図を埋め込む」をクリックします。

Googleマップの埋め込み方法その②

 

デフォルトのサイズは「中」になっています。

そのまま「HTMLをコピー」をクリックします。(クリックだけでコピー済み)

Googleマップの埋め込み方法その③

 

Step2:ホームページに載せる場所を確認して、HTMLを差し替える

架空教会03では、地図を3か所に入れています。

  1. ホームの下のほう
  2. 「アクセス」のページ
  3. 「フッター」

の3か所になります。

 

①ホームの下のほう

 

③フッター

 

【①ホームの下の方にあるGoogleマップの埋め込み方法】と【②「アクセス」のページにあるGoogleマップの埋め込み方法】は、「架空教会01」の埋め込み方と同じですので、そちらをご確認ください。

 

③「フッター」へのGoogleマップ埋め込み方法

まず、管理画面の外観の中にあるウィジェットをクリック。

右のほうにあるフッターを探してください。

 

フッターの中の、カスタムHTML:アクセスをクリック

 

既に入っているHTMLを選択し→Ctrl+A(全選択)→Ctrl+V(Googleマップの埋め込みコードを貼り付け)。

Step1でコピーした「Googleマップの埋め込みHTMLコード」を張り付けて、マップ情報を差し替えてください。

 

Step3:サイズを調整して、実際の表示を確認する

コード内のサイズを変更して、保存ボタンを押してください。

黄と緑のマーカーあたりを変更

width=”600″→width=”800
height=”450″→height=”350″

実際の表示も再読み込みをして、どのように表示されているかを確認してみてください!

完成です!!

 

ここまで読んで、「あれ、動画は?」と思った方はご連絡ください。

動画なくても大丈夫かなと思って作っていませんでした。

 

ご連絡いただいた先着1名様!私の方でマップを埋め込みを代行します!

応用編

船橋栄光教会では、Googleマップの道案内を埋め込んでいます。

船橋栄光教会のサイトはこちら

「こんなマップの埋め込みがあったよ!」という例やアイデアがありましたらぜひ教えてください!

ここに入れるか未定

ここに入れるか未定