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

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

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

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

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

実際の記事はこれです。

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

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

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

共有をクリックします。

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

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

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

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

HTMLをペーストします。

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

まとめ

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

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