WordPress

【WordPress】Googleマップをブログの記事内に埋め込む方法を紹介!

【WordPress】Googleマップをブログの記事内に埋め込む方法を紹介!

質問者
お店の紹介がしたいけどGoogleマップの貼り方がわからない

 

こんな方へ今回はGoogleマップをブログの記事内に埋め込む方法を紹介します!

 

WordPressの記事内にGoogleマップを埋め込む方法

今回はサンプルとして「仙台駅」をブログに埋め込んでいきます!

 

1.埋め込みたいところを検索

Googleマップを開いて、ブログに埋め込みたい場所を検索していきます!

 

今回は「仙台駅」を埋め込むので、仙台駅と入力して🔍をクリックします!

WordPress 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分程度あればできてしまうのでお店の紹介などをしている方は埋め込んでみてはどうでしょうか?

 

では、また次の記事で会いましょう!!

 

-WordPress

Copyright© kane blog , 2020 All Rights Reserved.