【初心者向け】ワードプレスにGoogleの地図を埋め込む方法

自分が困ったので、記事にしておきます!
WordPressのブログにgoogleの地図を入れる方法です!やってみたら簡単でした^^
 

ワードプレスにGoogleの地図を埋め込む方法

サイトに地図があったほうが紹介する時、わかりやすいですよね。
例えば「姫路城」の地図を掲載する方法です。

1. googleで地図に載せたい場所(この場合「姫路城」)を入力。

まずはgoogle先生で載せたい場所(この場合「姫路城」)を検索します。

2.検索結果がでたら、「地図」を押す

Googleマップに直接入力でもOKです!

 

2.共有マークを押す

左側に出てくる写真付き画面の中から共有をクリックしてください。

 

3.地図のサイズを調節する

このような画面が現れるので、載せるサイズを選びましょう。

サイズは以下の通りになっています。

小 横400px 縦300px
中 横600px 縦450px
大 横800px 縦600px
カスタムサイズ 自由に数字を入力

4.HTMLをコピーする

何をコピーしたかというとこのようなものです。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3274.6676042608065!2d134.6917160152359!3d34.8394489803991!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3554e003a23324b3%3A0x7a4f8c2f6eba81b1!2z5aer6Lev5Z-O!5e0!3m2!1sja!2sjp!4v1545799160429″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

5.HTMLをブログの貼りたいところに貼る(埋め込む)

書いている記事の貼りたい所にこのHTMLをペーストしましょう。
※WordPressのテキストページに貼ってくださいね。(ビジュアルに貼るとそのまま文字が反映されちゃいます。)
テキストに貼ると・・・↓こんな感じで表示されました!


 
拡大表示ができたり、クチコミ見られたり、便利ですねー!


まとめ

こんな感じでやってみたら難しくありませんでした!
意外と簡単なステップでできるので使ってみてください!
 

お役にたてたら幸いです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です