カテゴリー: ウェブ制作

タグ:Google(2)  Googleマップ(1)  簡単(4)  

googleマップを使ってワードプレスのブログ記事に地図を載せる方法

ホームページ自体はウェブ制作会社に作ってもらったけど、ブログは自分で更新している。

ワードプレスなどのCMSを使用したホームページが一般化した今、そういう方も非常に多いと思います。

プログラムやコードが全くわからなくてもできる、『Googleマップを自分のホームページ上に地図を載せる方法』を解説していきたいと思います!

Googleマップで住所を検索する

まずはGoogleマップを表示します。
https://www.google.co.jp/maps/

左上の検索窓に住所を打ち込みます。

googleマップの画面

Googleマイビジネスに登録している場合は、お店(会社)の名前でも大丈夫です。
住所や店名で検索すると、その位置にピンが立ち中心に表示されました。

埋め込みたい場所を表示

今、表示されている画面をホームページに埋め込んでいきます。

では、次の項目で実際にホームページに埋め込むためのコードを発行していきます!

Googleマップの埋め込みコードを取得する

まずは左上の検索窓の横にあるメニューボタンからメニューを開きます。

左上のメニューを押す

そうすると、以下のようなメニューが出現しますので、その中から、『地図を共有または埋め込む』をクリックします。

『地図を共有または埋め込む』を選択

すると、以下のようなポップアップが出てきますので、『地図を埋め込む』を選択した後『<iframe src=…【中略】…></iframe>』の部分をコピーします。

『地図を埋め込む』の中のiframeをコピーする

それでは、最後に次の項目で実際にホームページに地図を貼り付ける作業を紹介します。

ワードプレスの記事に地図を表示する

まず、ワードプレスの記事投稿ページを開きます。

ワードプレスの記事投稿画面

おそらく、ほとんどの方が通常『ビジュアル』モードを使って記事を更新していると思います。
地図の埋め込みにはコードを使用します。『ビジュアル』モードではコードを使用できないので、『テキスト』モードに切り替えて、埋め込みコードを貼り付けます。

『テキスト』モードで埋め込みコードを貼り付ける

コードを貼り付けたら、『ビジュアル』モードに戻すのを忘れずに。
『テキスト』モードでコードを貼り付けて『ビジュアル』モードに戻した際に地図が表示されていればOKです!

『ビジュアル』モードに戻すと、地図が表示されています。

記事を更新、公開すると無事Googleマップが表示されました!

記事ページにもマップが表示されています。

応用編

Googleマップの埋め込みコードを取得する際に、サイズを『カスタムサイズ』にすると、地図のサイズを自分で決めることができます。

Googleマップをカスタムサイズに設定

ホームページや使用する環境に応じて、サイズを変えてみてください!

2017.10.23

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: ツイート: -

TOP