WordPress で作成したホームページに GoogleMap を埋め込んで表示させる方法を調べたのでまとめておきます。
GoogleMap に[地図を埋め込む]という機能が実装されてたなんてしらなかった。。。
GoogleMap の作業
埋め込みたい地図を検索して表示
Google で埋め込みたい住所を検索します。
(ここでは「〒105-0011 東京都港区芝公園４丁目２−８」で検索しました)
ヒットした地図をクリックして「Googleマップ」で表示します。
[共有]というところをクリックすると以下のようなサブウィンドウが表示されます。
- [地図を埋め込む]タブを選択
- 地図の「HTMLをコピー」をクリック
地図のサイズを選択するとブログに合うように、地図のサイズを調整することができます。
「小」「中」「大」「カスタムサイズ」から選択が可能です。サイズはそれぞれ以下のとおりです。
- 「小」横400px 縦300px
- 「中」横600px 縦450px
- 「大」横800px 縦600px
- 「カスタムサイズ」大きさを入力
GoogleMap での作業はこんな感じで、次に WordPress の作業です。
WordPressの作業
WordPress 側でコピーしたコードを貼り付ける
WordPress 側で固定ページまたは投稿ページの編集画面を表示します。「+」リンクを押してブロックを追加します。
コピーした地図の埋め込みコードを貼り付けます。
[プレビュー]ボタンをクリックすると確認できます。
