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

店舗や企業のページを作る際に地図を表示することも多いと思います。

そんな特に便利なのはGoogle Mapの表示です。

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

目次

• 直接地図を挿入する方法
• プラグインを利用する方法
• WordPressを学習中の方へ

 

直接地図を挿入する方法

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

 

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

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

左上のメニューの「地図を共有または埋め込む」ボタンがあるので、クリックします。

 

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

 

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

 

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

 

WordPressに反映

WordPressの「投稿>新規追加」で開いたらタイトルを入力します。

＋ボタンで「カスタムHTML」ボタンを検索してクリックします。

 

コピーしたコードを貼り付けます。

 

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

 

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

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

WordPress 5.0以降、ブロックエディタが追加されました。

ブロックエディタには、さまざまなブロックが用意されています。

標準でサポートされていない（バージョン5.8.1現在）Google Mapのブロックのプラグインは、エディタで追加できます。

＋ボタンで「すべて表示」をクリックすると、左側にブロック一覧が表示されます。

上部の検索窓で「google map」を検索すると、インストール可能なブロックのプラグインが一覧されます。

 

今回は、「Map」というブロックのプラグインをインストールします。

クリックすると、インストールしてそのまま挿入場所に地図が表示されます。

場所がニューヨークになっているので、次は住所を修正します。

⋮（3点リーダー）をクリックして「追加設定を表示」をクリックします。

 

右側に追加設定が表示されます。

 

ここでAddressに、たとえば「東京都墨田区押上1−1−2」と入力して、Zoomのスライドバーを右に拡大すると、地図が拡大表示されます。

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

更新すると、下記のように表示されます。

 

これだけで完了です。

 

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

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

 

 

[PR] Webサイト制作で副業する方法とは

WordPressを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

WordPressでのサイト制作を学習していて、このように思ったことはありませんか？

テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。

まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。