WordPressでGoogleマップの地図を表示させる方法【初心者向け】

WordPressでグーグルマップの【地図】を表示させる方法を初心者向けに解説した記事です。地図の埋め込みコードを使って挿入する方法と、プラグインを使った方法の2つを紹介しています。記事を参考にして、地図を表示させてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

店舗や企業のページを作る際に地図を表示することも多いと思います。そんな特に便利なのはGoogleマップの表示です。

そこで今回は、WordPressで作成したサイトにGoogleマップの地図を表示させる方法をお届けします。

 

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

大石ゆかり

田島メンター!!WordPressの記事にGoogle Mapを入れたいんですけど、どうやったらいいんですか〜?

田島悠介

記事に地図を入れる方法は「直接地図を挿入する方法」と「プラグインを利用する方法」の2つの方法があるよ。両方とも教えるね!

大石ゆかり

はい、お願いします♪

 

目次

今回は下記の2種類の方法を順に説明していきます。まずは自分で簡単な方法を試してみてください。

 

 

直接地図を挿入する方法

Google Mapから、直接コードを取得して表示したいところに挿入する方法です。

 

地図出力用のコードを取得

まず、Google Mapで、挿入したい地図を表示します。
(今回はスカイツリーを選んでみました)

画面の右下に歯車のマークがあるので、クリックします。そこで立ち上がるメニューの中の「地図を共有する/埋め込む」を選びます。

map1

 

すると、ポップアップが立ち上がるので、「地図を埋め込む」をクリックします。

map2

 

左のプルダウンから、「カスタムサイズ」を選択すると、好みのサイズに変更することができます。

map3

サイズ調整が終わったらコードをコピーします。

 

WordPressに反映

WordPressの表示したい場所にコードを貼り付けます。

その時、「テキストモード」を選択してから貼り付けてください。

map4_001

 

更新すると、このように表示されました。

map5

 

 

[PR] WordPressで挫折しない学習方法を動画で公開中

プラグインを利用する方法

レストランの紹介をするブログの場合など、地図をたくさん埋め込む必要がある場合は、プラグインを使うと効率的に挿入できます。

よく使われるプラグインは、simple-mapです。プラグインの使い方がわからない場合は、WordPressのプラグインをインストールする方法をご覧ください。

 

このプラグインの場合は、挿入したい場所にショートコードを入力するだけで地図の挿入ができます。

ショートコードとは、下記のようなものです。

[map addr=”東京都墨田区押上1−1−2” width=”600px” height=”450px”]

 

この際、widthで横幅、heightで縦幅を指定することができます。

他にも、倍率(zoon)なども設定でき、シンプルながら地図挿入に必要な機能は備わっています。

 

住所と大きさを指定するだけで簡単に地図を挿入できるので、わざわざGoogleマップを開く必要もありません。

先ほどの方法と同じように「テキストモード」にしてからショートコードを貼り付けてください。

map6

これだけで完了です。

 

以上のように、プラグインを使っても、使わなくてもGoogleマップは簡単に挿入できます。

まずは自分に合った方法を試してみてください。

 

大石ゆかり

地図を埋め込むことができました〜♪

田島悠介

お店の紹介とかイベントの開催場所とか、記事中に地図を埋め込みたい場面ってたくさんあるから、覚えておくと良いね♪

大石ゆかり

はい♪

 

さらにWordPressを使いこなしたい場合は、WordPressで記事にYouTubeの動画を埋め込む方法も合わせてご覧ください。

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。