Googleマップを埋め込む方法|WordPressブロックエディター【Snow Monkey】

Webサイトで良くみる会社概要や店舗情報ページの地図。

オリジナルの地図を使用している以外では、Googleマップを埋め込んでいることが多いと思います。

Snow Monkey(ブロックエディター)を使っている場合、Googleマップはどうやって表示させるんだろう?

今回の記事では「Googleマップの埋め込み方」について解説します!

Googleマップの埋め込みによって、このようなコンテンツが簡単に作成できます。

▲2カラムの表示例

Snow Monkeyテーマに限らず、WordPressのブロックエディターを使っている方なら共通の方法になりますので、参考にしていただけると嬉しいです。

地図として表示させたい住所をGoogleマップで検索する

まずは、住所の検索を行います。

Google検索で住所を入力し、「地図」の検索タブをクリックします。

例として検索している住所は「東京都千代田区丸の内1丁目」、東京駅の住所です。

検索結果にGoogleマップが表示されている場合、その地図をクリックしてもOKです。
Googleマップのページが表示されます。

埋め込み用のHTMLタグをコピーする

Googleマップには、サイトに埋め込むためのHTMLタグを表示させる機能があります。

コピペするだけでGoogleマップを表示させることができるのでとても便利です。

Googleマップで対象の住所を開いた状態で、「共有」アイコンをクリックします。

▲共有アイコンをクリック

共有ウインドウが開いたら、「地図を埋め込む」のタブを開きます。

HTMLタグが表示されますので、「HTMLをコピー」をクリックします。

これでパソコンのクリップボードにコピーされます。

HTMLの左側に「中▼」という表示があり、ここで地図のサイズを変更することもできます。

サイズ変更は小 / 中 / 大 / カスタムサイズ から選択できます。

カスタムサイズでは好きなサイズにできますので、サイトのデザインに合わせて調整してください。
サイズを変更するとHTMLタグが変わるので、忘れずにコピーしておきます。

WordPressの編集画面にHTMLを貼り付ける

コピーしたHTMLタグを、WordPressの編集画面に貼り付けます。

とは言え、ブロックエディターではそのまま貼り付けても反映されませんので、専用のブロックを使用します。

ブロック一覧、もしくはブロック検索から「カスタムHTML」ブロックを選択してください。

HTMLを入力できるボックスが作成されますので、その中に先ほどコピーしたGoogleマップ埋め込み用のタグを貼り付けます。

これでGoogleマップの埋め込みが完了しました!

編集画面ではHTMLタグがそのまま表示されていますが、プレビューで確認するとちゃんとGoogleマップが表示されています。

Googleマップを中央寄せにするCSSカスタマイズ

そのままHTMLタグをコピペした状態だと、マップは左寄せになっていると思います。
この項目では、CSSで中央寄せに変更するための手順をご紹介します。

まずは埋め込み用のHTMLタグにCSSクラス名を指定します。

他のブロックであれば、右側のブロック編集画面の高度な設定⇒追加CSSクラスから指定できるのですが、「カスタムHTML」ブロックにはその設定はありません。

そのため、直接HTMLタグに追記します。

カスタムHTMLブロック内のタグを下記のように編集してください。

<div class="google-map">ここにGoogleマップ埋め込み用HTMLタグ</div>

コピペしたHTMLタグを、CSSクラス名の指定タグで挟むイメージです。

編集画面で実際にクラス名タグを追加すると、このようになります。

クラス名はわかりやすいように「google-map」としています。

保存したら、次はダッシュボード⇒外観⇒カスタマイズ⇒追加CSSに進みます。

▲追加CSS入力欄

追加CSSの入力欄に、下記のCSSをコピペします。

 /* グーグルマップの中央寄せと下部余白追加 */
.google-map{
  text-align:center;
}

これでGoogleマップがページの中央に表示されているはずなので、保存してからプレビューで確認してみてください。

Googleマップを埋め込む方法|WordPressブロックエディター まとめ

今回はWordPressブロックエディターのGoogleマップの埋め込み方について解説しました。

手順をまとめると下記の通りです。

Googlepマップで住所を検索する
「共有」⇒「地図を埋め込む」で表示されたHTMLをコピーする
WordPress編集画面で「カスタムHTML」ブロックを作成し、コピーしたHTMLを貼り付ける

このように、HTMLをコピペするだけで簡単にサイト上に地図を表示させることができます。

必要に応じて中央寄せのCSSカスタマイズも試してくださいね。

最後までお読みいただきありがとうございました!

この記事を書いた人

Kazumi

フリーランスWebデザイナーです。画像加工や動画編集、アニメ制作もしています。時間と場所に縛られない自由な生活を手に入れるためにスキルを磨いています!ブログでは学んだことのアウトプットをメインに役立つ知識を発信しています。