ブログやホームページで地図を表示させる方法としては、Googleマップが定番中の定番でしょう。
以前はお店や施設の場所を説明するのに自作の周辺マップを使用するということもありましたが、現在ではほとんどGoogleマップが用いられています。
自分のブログ記事にGoogleマップを埋め込むことで、より記事の内容が分かりやすくなり、読者の満足度を高めることができます。
この記事では、Googleマップを利用するメリットや、GoogleマップをSWELLのブログの投稿ページに埋め込む方法を解説していきます。
Googleマップを利用するメリット
Googleマップには以下のような素晴らしいメリットがあります。
- 無料で利用できる
- 埋め込みが簡単にできる
- 拡大や縮小、サイズの変更ができる
- 周辺の環境も確認しやすい
- 最新の情報に自動的に更新される
ブログの記事内容を充実させるためにも、うまく活用していきたいですね。
Googleマップをブログの投稿ページに埋め込む方法
それでは、Googleマップを埋め込む方法を解説していきます。
埋め込みたい場所をGoogleマップで表示する
ブログに埋め込みたい場所を、Googleマップで表示します。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/0c5368b87b59e627c238629d35303fe0-800x468.jpg)
ここでは「レインボーブリッジ」と入力してみました。
共有方法を選択する
「共有」マークをクリックすると、共有方法が選択できるようになります。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/87336e1312a14ef9187b4fbb9ff35c37.png)
「地図を埋め込む」を選択します。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/2e7fbe244a61bc3f5630a949ab9db1d1.png)
地図の大きさを調整する
縦横サイズを決める
埋め込む地図の縦横サイズを調整することができます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/f519316b980e274eaa65492d76c46d6c.jpg)
小、中、大、カスタムサイズの4種類から選択できます。サイズは以下の通りです。
- 小:横400px 縦300px
- 中:横600px 縦450px
- 大:横800px 縦600px
- カスタムサイズ:数字を自由に入力
ズームレベルを調整する
Ctrlキーを押しながらマウスホイールで拡大・縮小をすることができます。
埋め込みコードをコピーする
「HTMLをコピー」をクリックすることで、埋め込みコードをコピーすることができます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/ea0cfd649fdd1f98a8e340a8235fb53d.jpg)
投稿ページのHTMLに貼り付ける
埋め込みたいところで「+」をクリックし、検索に「HTML」と入力して「カスタムHTML」を表示します。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/b12042d16f9d79315b0e522ee656c8ff-800x167.png)
「カスタムHTML」をクリックし、コピーした埋め込みコードを貼り付けます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/a3741f9f2aa007a600b6a1108cfaf4d1-800x253.png)
以上で埋め込みは完了です。
「プレビュー」をクリックすると、地図の表示を確認することができます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/c7d5b7c350dce5bdbffeb7512439303a.jpg)
まとめ
今回の記事では、Googleマップをブログの投稿ページに埋め込む方法を解説しました。
多くのユーザーが使用しているGoogleマップを活用し、より充実した内容のブログを作っていきましょう。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/image-1-1.jpg)