ものづくりのブログ

うちのネコを題材にしたものづくりができたらいいなと思っていろいろ奮闘してます。

GoogleMapをWordPressで作成したホームページに埋め込む方法

WordPressで作成したホームページにGoogleMapを埋め込んで表示させる方法を調べたのでまとめておきます。
GoogleMapに[地図を埋め込む]という機能が実装されてたなんてしらなかった。。。

GoogleMapの作業

埋め込みたい地図を検索して表示

Googleで埋め込みたい住所を検索します。
(ここでは「〒105-0011 東京都港区芝公園4丁目2−8」で検索しました)
ヒットした地図をクリックして「Googleマップ」で表示します。
f:id:a1026302:20200930103754j:plain

[共有]というところをクリックすると以下のようなサブウィンドウが表示されます。

  • [地図を埋め込む]タブを選択
  • 地図の「HTMLをコピー」をクリック

f:id:a1026302:20200930104432j:plain


地図のサイズを選択するとブログに合うように、地図のサイズを調整することができます。
「小」「中」「大」「カスタムサイズ」から選択が可能です。サイズはそれぞれ以下のとおりです。

  • 「小」横400px 縦300px
  • 「中」横600px 縦450px
  • 「大」横800px 縦600px
  • 「カスタムサイズ」大きさを入力

f:id:a1026302:20200930104643j:plain
GoogleMapでの作業はこんな感じで、次にWordPressの作業です。

WordPressの作業

WordPress側でコピーしたコードを貼り付ける

WordPress側で固定ページまたは投稿ページの編集画面を表示します。「+」リンクを押してブロックを追加します。
f:id:a1026302:20200930123026j:plain

コピーした地図の埋め込みコードを貼り付けます。
[プレビュー]ボタンをクリックすると確認できます。
f:id:a1026302:20200930123519j:plain