以下に具体的な手順をステップごとに解説します。
パソコンで Google マップ を開きます。
左上の検索窓に、埋め込みたい場所(会社や店舗の住所、施設名など)を入力して検索します。
目的の場所に赤いピンが立ち、左側に詳細情報が表示されたら、その中にある 「共有」 アイコンをクリックします。
ポップアップ画面が開いたら、上部にある 「地図を埋め込む」 タブに切り替えます。
地図のプレビューが表示されます。左上のメニューからサイズ(「小」「中」「大」「カスタムサイズ」)を選ぶことができます。
サイズを決めたら、「HTML をコピー」 という文字をクリックします。(<iframe src=...> で始まるコードがクリップボードにコピーされます)
WordPressの管理画面を開き、地図を載せたい投稿または固定ページの編集画面を開きます。
ブロック追加ボタン(+マーク)をクリックし、「カスタムHTML」 ブロックを追加します。
コピーしたコードをそのまま貼り付けます。
ブロックの「プレビュー」ボタンを押して地図が表示されれば成功です。
スマホ対応(レスポンシブ化)のワンポイントアドバイス
Google カレンダーの時と同様に、デフォルトのコードのままだと、スマートフォンの小さな画面では地図がはみ出してしまうことがあります。
貼り付けたコードの中に width="600" (数字は選んだサイズによって異なります)という部分があります。ここを width="100%" に書き換えるだけで、パソコンでもスマホでも、画面の幅に合わせて自動でぴったり綺麗に表示されるようになります。