WordPressの投稿ページにGoogle Mapsを埋め込む方法 | DXシステム開発・WEB制作 SmileVision|大阪のWEBシステム開発 SmileVision

社員ブログ WordPressの投稿ページにGoogle Mapsを埋め込む方法

こんにちは。いろはです。
皆さん、ブログやHPでお店の紹介やイベント会場の場所を載せる時に
合わせて地図を載せたいと思ったことはありませんか?
近年はスマホの普及が進み、Google Mapsを埋め込むことが重要となってきました。
Google Mapsを埋め込んでおくと、そのままマップアプリが立ち上がり道案内してくれるので
迷わず目的地に到着できますね(笑)
そこで今回はWordPressにGoogle Mapsの情報を埋め込む方法を解説いたします。

Google Mapsを埋め込む方法

Google Mapsには地図の場所を簡単に共有できる機能が備わっています。
それはコードを貼り付けるだけでマップの位置がわかる
「地図を埋め込む」という機能です!
では早速WordPressにGoogle Mapsを埋め込んでみましょう。

1.Google Mapにアクセス

ブラウザでGoogle Map( https://maps.google.co.jp/ )にアクセスします。
img1

2.Google Mapsに検索ワードを入力します

img2
検索欄に住所や建物名などを入力します。今回は東京駅の地図を載せてみます。

3.共有ボタンをクリックする

img3
「共有」ボタンをクリックします。

4.地図を埋め込むをクリックする

img4
地図を埋め込むを選択します。

5.地図の大きさを調整する

img5
地図の大きさを調整します。サイズは小、中、大、カスタムの4種類から選択できます。
WordPressにマップを貼り付ける場合は「中」くらいで大丈夫です。

6.地図の縮尺の調整をする

img6
「+」と「-」で地図の縮尺を調整します。

7.埋め込みコードをコピーする

img7
ウィンドウ上部に表示されている埋め込みコードをコピーします。

8.WordPressにコピーしたコードを貼り付ける

img8
7でコピーしたコードを投稿ページの記事に貼り付けます。
貼り付ける際は必ずテキストを選択してから貼り付けてください。
上手くできれば以下のように表示されます\(^o^)/

まとめ

いかがでしたでしょうか。以下、Google Mapを埋め込む方法のまとめです。
1.Google Mapで、埋め込みたい場所の名称を指定
2.Google Mapの「共有」よりマップの縮尺、大きさを指定して埋め込みコードをコピー
3.WordPressの任意の場所に、埋め込みコードを貼り付ける
Google Mapsを埋め込むことで、お客様や読者も見やすいですし、
設置も簡単なので、是非ご活用なさってください!
以上、WordPressの投稿ページにGoogle Mapsを埋め込む方法でした!

ABOUT ME
いろは
いろは
2017年入社 開発部所属のいろはと申します! 当ブログではWordPressなどWEBに関するアイデアや応用例をを中心に発信して参ります。