店舗や企業などのホームページでは、所在地の地図を載せるのはほぼ必須だと思います。ワードプレスでホームページを自作して、どうしたらいいのだろう?という方のために、ご自身のサイトにGoogleマップを埋め込む方法をご紹介させていただきます。
Contents
Googleマップとは
![](https://em-wc.com/wp-content/uploads/2021/05/maxresdefault-1024x576.jpg)
Googleマップは、グーグルが提供している地図情報サービスで、ほぼ全世界の地図データ、航空写真が取り込まれています。
これらの地図情報は、個人・企業に関わらず無償で公開・提供されているので、だれでも無料で活用することができます。
Googleマップを埋め込む流れ
- Googleマップにアクセスして場所を検索
- 地図のHTMLコードを生成、コピーする
- 自分のサイトにHTMLコードを貼り付ける
流れとしてはこれだけですので、非常に簡単です。
1.Googleマップにアクセスして場所を検索
こちらのURLにアクセスして、右上の検索欄に住所または施設名を入力します。
Googleマップ:https://www.google.co.jp/maps/
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-303-1024x504.jpg)
2.地図のHTMLコードを生成、コピーする
検索した住所の地図が表示されたら、「共有」をクリックします。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-304-1024x543.jpg)
「地図を埋め込む」をクリック。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-305.jpg)
「HTMLをコピー」をクリックすると<iframe …のHTMLコードがコピーされます。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-306.jpg)
3.自分のサイトにHTMLコードを貼り付ける
今度は、ご自分のWordPressサイトの貼り付けたいページの編集画面に行って、コピーしたHTMLコードを貼り付けます。
固定ページか投稿ページの編集画面で、ブロックの追加をクリックし、「カスタムHTML」をクリックします。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-308.jpg)
そこに先ほどのHTMLコードを貼り付ければ完成です。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-309-1-1024x313.jpg)
実際にホームページを表示してみて、正常に地図が表示されていれば完成です。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-310-1024x410.jpg)
まとめ&サイズの調整方法
Googleマップの埋め込みは、やり方はとても簡単ですのでお勧めです。
ちなみに地図のサイズを変えたい場合は、下の赤枠で囲った、width=”横幅px”、height=”高さpx”、の数値を変えればOKです。
地図の表示をコンテンツ幅いっぱいにしたい場合は、width=”100%”にしてください。
![](https://em-wc.com/wp-content/uploads/2021/05/スクリーンショット-309.jpg)