WordPress

WordPressにGoogleマップを埋め込む方法【Gutenberg】

googleマップをwordpressに埋め込む方法

スポンサーリンク

WordPressで店舗情報やコーポレートサイトを作成する際に用意しておきたい所在地を表す地図ですが、その際にとても役立つのがGoogleマップです。

このGoogleマップはWordPressで簡単に地図を埋め込むことが可能です。

「GoogleマップをWordPressの記事に埋め込みたいけど方法が分からない!」という方のために、今回はブロックエディタ「Gutenberg」を使用してGoogleマップを埋め込む方法を解説します。

Googleマップ

誰もが一度は使ったことがあるであろうGoogleマップ。

2005年のサービス開始から今ではこのGoogleマップは人々の暮らしに欠かせないものとなりつつあります。

Googleマップが普及するまでは紙の地図を持ち歩いていましたが、2008年のモバイル対応の開始からモバイル向けの機能を拡充させ続けたことにより、スマホ一つで目的地に辿り着けるようになりました。

また、ストリートビューという機能を使うことで、まるで現地に降り立ったかのように目的地の周辺を歩くことができるようになりました。

Googleマップを埋め込む方法

Googleマップを埋め込む方法ですが難しそうに感じますが実はとても簡単です。

それでは画像を使ってGoogleマップを埋め込む方法を解説していきます。

Googleマップで目的地を探す

まずはGoogleで目的地の住所を入力し、マップを表示させます。

マップが表示されたら「共有」をクリックします。

目的地のコードを取得

次に目的地のコードを取得します。

共有をクリックすると「リンクを送信する」と、「地図を埋め込む」が表示されるので「地図を埋め込む」を選択します。

「地図を埋め込む」を選択するとコードが表示されます。

まずはコードの左側にあるプルダウンから埋め込む地図のサイズを選択します。

デフォルトでは「中」となっていますが、下の4つからサイズが選択できます。

  • 小サイズ:400✖️300ピクセル
  • 中サイズ:600✖️450ピクセル
  • 大サイズ:800✖️600ピクセル
  • カスタムサイズ

カスタムサイズでは下の画像のように自由にサイズを設定することができます。

サイズを決定したら「HTMLをコピー」をクリックし、表示されたコードをコピーします。

これでGoogleマップのコードの取得が完了です。

WordPressに埋め込む

コードをコピーしたら次にWordPressにGoogleマップを表示させます。

ブロックに直接コードを貼り付けてしまうと上の画像のようにエラーとなり表示されません。

そこで旧エディタであればテキストモードに変更するように、Gutenbergではコードを入力できるようにブロックを変更します。

ツールバーの右端のボタンをクリックし、HTMLとして編集を選択します。

HTMLとして編集を選択すると『<P></P>』というPタグが表示されるのでその間に先ほどコピーしたコードを貼り付けます。

埋め込み完了

入力画面のままでは貼り付けが成功しているか確認ができないのでプレビュー画面で確認しましょう。

Googleマップが表示されたら埋め込み完了です。

まとめ

Gutenbergでコードを埋め込む方法ですが、他にもコードエディタを使用したり、ウィジェットのカスタムHTMLを使用して埋め込むこともできます。

Googleマップの埋め込みは様々な機会で利用しますので今回の記事を参考にしてマスターしておきましょう。

スポンサーリンク

-WordPress
-

© 2022 ふっくんブログ