こんな方へ今回はGoogleマップをブログの記事内に埋め込む方法を紹介します！
もくじ
WordPressの記事内にGoogleマップを埋め込む方法
今回はサンプルとして「仙台駅」をブログに埋め込んでいきます！
1.埋め込みたいところを検索
Googleマップを開いて、ブログに埋め込みたい場所を検索していきます！
今回は「仙台駅」を埋め込むので、仙台駅と入力して🔍をクリックします！
2.共有をクリック
検索して埋め込み他場所に赤いピンが刺さったら、共有をクリックします。
共有を押すとこのような画面になるので地図を埋め込むをクリックします。
3.地図の大きさを選択
地図の大きさは小、中、大、カスタマイズが選択できます。
- 小：横400px 縦300px
- 中：横600px 縦450px
- 大：横800px 縦600px
- カスタムサイズ：大きさを入力
地図のズームイン、ズームアウトはCtrlキーを押しながらマウスホイールで調節出来ます！
4.HTMLをコピー
サイズが決まったらHTMLをコピーをクリックします！
5.HTMLをブログに貼り付ける
ここまで来たら後は地図を埋め込みたいところに先ほどコピーしたHTMLを貼り付けます！
これで設定は終わりですが、ただ貼り付けると地図は右側に寄ってしまいます。
HTMLの前後に<div class="center"></div>を入力します！
それぞれのHTMLは埋め込まれた地図の下に書いてあるので確認してみてください！
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3132.8350476436262!2d140.8802488154259!3d38.26013157967391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8a28180c510b87%3A0xb2a30b91be1ffdbc!2z5LuZ5Y-w6aeF!5e0!3m2!1sja!2sjp!4v1589293924292!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div class="center"><iframe style="border: 0;" tabindex="0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3132.8350476436262!2d140.8802488154259!3d38.26013157967391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8a28180c510b87%3A0xb2a30b91be1ffdbc!2z5LuZ5Y-w6aeF!5e0!3m2!1sja!2sjp!4v1589293924292!5m2!1sja!2sjp" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen" aria-hidden="false"></iframe></div>
【WordPress】Googleマップをブログの記事内に埋め込む方法を紹介のまとめ
今回はGoogleマップをブログの記事内に埋め込む方法を紹介しました！
5分程度あればできてしまうのでお店の紹介などをしている方は埋め込んでみてはどうでしょうか？
では、また次の記事で会いましょう！！