WordPress ブロックエディタでGoogleマップの地図を表示させる

WordPressブログの記事の中に、ブロックエディタを使ってGoogleマップの地図を埋め込む方法をまとめます。

飲食店の紹介記事では食べログのリンクを貼れば自動的に地図も表示され、飲食店以外でも施設のWebのリンクを貼れば、読者がそのリンクから場所を知ることができます。

しかし、Webページのない場所はGoogleマップを貼る必要が出てきます。

川でアカエイを目撃したのを記事にしたときにGoogleマップをブログの中に埋め込みました。

UNADJUSTEDNONRAW thumb e19 474x1024 - WordPress ブロックエディタでGoogleマップの地図を表示させる

実際の記事はこれです。

Googleマップの該当の場所を立ち上げる

7a713497b08767735229c3c24ddab3ca - WordPress ブロックエディタでGoogleマップの地図を表示させる

該当の場所を立ち上げます。

写真アプリやGoogleフォトのリンクからたどるのが簡単です。

共有をクリックします。

3313ee29fe97bca930b064a46444272c - WordPress ブロックエディタでGoogleマップの地図を表示させる

「地図を埋め込む」というタブに切り替えて、「HTMLをコピー」をクリックします。

すると埋め込みコードがクリップボードにコピーされます。

WordPressブロックエディタで埋め込みコードを挿入する

4aa3a647c322ebab706dc1c54670f571 - WordPress ブロックエディタでGoogleマップの地図を表示させる

埋め込みたい場所で、ブロック追加の+ボタンを押して、「カスタムHTML」を選択します。

DraggedImage 3 - WordPress ブロックエディタでGoogleマップの地図を表示させる

HTMLをペーストします。

DraggedImage 1 1 - WordPress ブロックエディタでGoogleマップの地図を表示させる

プレビュータブに切り替えるとマップが表示されているのが確認できます。

まとめ

WordPressブログにGoogleマップを貼り付ける(埋め込む)方法をまとめました。

WordPressのブロックエディタを使えば、カスタムHTMLのブロックの中に、Googleマップの埋め込みコードを貼り付けるだけで完了します。