Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. ニュース
  3. WordPressにGoogleマップを表示させよう!便利なプラグイン6選
  1. action
  2. URLをコピーしました

WordPressにGoogleマップを表示させよう!便利なプラグイン6選

  • 2017年5月16日
  • ニュース

WordPress を使用して作成したホームページを公開する際、特に実店舗をお持ちの場合や企業情報を掲載したい場合など、場所を呈示しなければならないケースがあります。
住所だけでも構わないのですが、あわせてマップも掲載しておくと、ホームページを訪問した ユーザー により親切な ページ を作成することができます。

今回は、 WordPress で作成したホームページに Google マップを表示するための プラグイン 選をご紹介します。
それぞれに特長があり、表示できる内容が異なりますので、自社ホームページの内容やどのようなマップを表示したいのかにあわせて、本記事を参考に プラグイン をインストールしてみてはいかがでしょうか。

2017年7月19日 本文内に一部誤りがありましたので修正いたしました。

WordPress で Google マップを表示させるための プラグイン 6選

1.TCD Google Maps

TCD_Google_Maps.png インストールはこちら

こちらは、使用できるデザインテーマが非常に豊富な プラグイン です。
日本製の プラグイン のため、管理画面が日本語表記されており英語が苦手な方でも難なく使用することができます。

ショートコードを取得すれば(ショートコードの取得方法については、記事下部を参照ください)、記事中に簡単にマップを表示することができるため、ホームページの トップページ だけではなく記事内でもマップを表示したいという場合に非常に便利です。

さらに、縦横サイズやマップのズームを調整する機能も搭載されているため、ホームページを訪問した ユーザー が見やすいマップを表示することができます。

なお、この プラグイン の使用にあたっては、APIキーの取得が必須となります。
APIキーの取得方法については、記事下部にてご紹介していますので参考にしてください。

2.WP Google Maps

WP_Google_Maps.png インストールはこちら

こちらは、 Google マップを表示するための プラグイン の中でも比較的人気の高い プラグイン です。
使用時にトラブルがおきるなど分からないことがあった場合に、 インターネット 上で検索をするとさまざまな情報を得ることができるため、今回ご紹介する プラグイン の中でも特に WordPress 初心者の方にオススメです。

1記事につき表示できるマップの数は1つまでですが、1つのマップ上に複数のマーカーを落とすことができます。
こちらの プラグイン もショートコードを取得すると、投稿 ページ から手軽にマップの追加が可能です。

有料のアドオンを使用すればさらに使用可能な機能を拡張することが可能で、デフォルトのマーカーアイコンを変更したり、吹き出しのテキストの変更や画像・ リンク の挿入、マーカーごとのアイコンの変更などを行うことができます。
無料版を使用してみて、さらに機能を拡張したい場合は、有料のアドオンの使用もオススメです。

3.Comprehensive Google Map Plugin

Comprehensive_Google_Map_Plugin.png インストールはこちら

こちらは、ウィジェットとして Google マップを追加することができる プラグイン です。
マーカーの種類が変更可能なだけではなく、何箇所も打つことができたりマーカークリック時の情報を個別に編集できたりと、汎用性が比較的高い点もオススメ。
こちらの プラグイン もショートコードを使用すれば投稿 ページ から簡単にマップを追加することもできます。

管理画面は英語で表記されていますが、基本的な英単語ばかりが使用されているので、英語が苦手な方でもそれほど抵抗を感じずに使用することができて安心です。

4. Google Maps Widget

Google_Maps_Widget.png インストールはこちら

こちらも、ウィジェットとして Google マップを追加することができる プラグイン です。
先にご紹介した「Comprehensive Google Map Plugin」と異なり、マップをクリックすると拡大表示される点が大きなポイントです。
ズームレベルはもちろん、マップサイズそのもののカスタマイズも可能です。

オリジナルのマーカーが10色提供されていますので、ホーム ページ デザインの トンマナ に合わせて色を選択することもできます。
比較的カスタマイズ性が高い プラグイン ですので、デフォルトのマップではつまらない、競合他社とは少し異なるホームページに仕上げたいという方にオススメです。

5.MapPress Easy Google Maps

MapPress_Easy_Google_Maps.png インストールはこちら

こちらは、マップに テキスト メッセージを添付することができる プラグイン です。
複数地点を表示することも可能な上に、航空写真やストリートビューの表示、A-B間ルート案内も行うことができます。

管理画面が日本語表記のため英語に抵抗がある方でも難なく作業できるほか、特カスタマイズなどが必要ない場合には プラグイン をインストールして有効化するだけで設定の9割は完了するという、作業工程の少なさもポイントです。
少しでも簡単・手軽にホームページ上にマップを表示したい、という方にはぜひ試していただきたい プラグイン です。

6.Maps Builder

Maps_Builder.png インストールはこちら

こちらも、マップ上に テキスト メッセージを掲載することができる プラグイン です。
テキスト メッセージは HTML タグ に対応しているため、 フォント サイズやカラーをカスタマイズしてホームページの トンマナ に合わせたマップを作成することができます。
マップのサイズは変更可能で、さらにショートコードを取得すると設定作業も簡単に行えます。

なお、こちらの プラグイン を使用する際はAPIキーの取得が必須となります。
APIキーの取得方法については、記事下部にてご紹介していますので参考にしてください。

ショートコードの取得方法

先にご紹介した プラグイン では、住所とマップサイズを指定するためのショートコードが必要となるものもあります。
ショートコードの取得は非常に簡単ですので、以下のコードを編集して作成してください。

[map addr=“東京都千代田区一番町17-6” width=“600px” height=“450px”]

「東京都墨田区押上1-1-2」は、ホームページ上で表示させたい住所を指定する箇所です。
実店舗や自社の住所に書き換えてください。
「width=“600px” height=“450px”」は、表示するマップサイズを指定する箇所です。
ただし、使用しているテーマがレスポンシブデザイン対応のものである場合は「px(ピクセル)」ではなく「%」で指定することをオススメします。

APIの取得

先にご紹介した プラグイン では、 Google マップのAPIを取得が必須のものもあります。
APIキーを登録して プラグイン を利用すると、マップの利用状況の確認も可能になりますので、APIが必須となる プラグイン を使用する場合、またはマップの利用状況を確認したい場合は、以下の手順に従って取得してください。

step1.

1.png まず、Google Maps APIs for Webへアクセスします。
以下の5種類のAPIが表示されていますので、使用したいものを選択してクリックしてください。

・
                  Google
                 Maps 
                  JavaScript
                 API:マップのカスタマイズが可能
・
                  Google
                 Maps Embed API:コード記述や割当の制限なし
・
                  Google
                 Street View Image API:実際の画像とパノラマ画像の使用が可能
・
                  Google
                 Static Maps API:動的
                  ページ
                の読み込みを使用せずにマップの埋め込みが可能
・
                  Google
                 Places API 
                  JavaScript
                 ライブラリ:多くの場所の最新情報が利用可能

step2.

2.png 続いてチュートリアルが表示されますので、必要な場合は閲覧します。
どのAPIを選択してもチュートリアルが表示され、そのままAPIの取得方法を導いてくれますので、表示されている手順に従って情報を入力し、進めてください。

まとめ

プラグイン を使用せずにホームページにそのままマップを埋め込むことも可能です。
しかし埋め込み作業は非常に手間がかかるほか、マップが画面スクロールの邪魔になってしまったり大きなマップは埋め込むことができなかったりと、ホームページの作成者側も訪問する ユーザー 側も不便に感じてしまうケースは少なくありません。

今回ご紹介した プラグイン を使用すれば、エンジニアがいないチームでホームページを作成する場合はもちろん、 WordPress 初心者の方でも簡単にホームページ上にマップを表示することができます。
プラグイン を使用して、手間なく整ったホーム ページ 作成を行いましょう。

関連記事

  • 初心者にオススメ!とりあえずいれておけば安心なWordPressプラグイン10選
  • 営業マンなら使わないともったいない!Googleマップの意外に見落とされがちな「マイマップ」機能とは
  • 上司・先輩を、もっとスマートにエスコート!Googleマップ 便利な機能・使い方9選
  • 思考の整理ならツールを使おう!無料マインドマップツール6選
  • WordPress使用者必見! 知っていると便利なSNS関連プラグイン10選

関連記事

  • 初心者にオススメ!とりあえずいれておけば安心なWordPressプラグイン10選
  • 営業マンなら使わないともったいない!Googleマップの意外に見落とされがちな「マイマップ」機能とは
  • 上司・先輩を、もっとスマートにエスコート!Googleマップ 便利な機能・使い方9選
  • 思考の整理ならツールを使おう!無料マインドマップツール6選

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

この記事を書いた人

三輪 きらら

ライター4年目。
ferret編集部卒業後は、沖縄にてフリーランサーとして子育てをしながらライティング・メディア運営などWeb関連業務をしています。
  
Twitter:@kirara_basic
  
>> 執筆記事一覧はこちら

Webマーケティングのノウハウ集をプレゼント!

【ferret】5つのマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全79ページ)

限定版の資料をダウンロードする(全79ページ)抜粋版のサンプルを読む(全3ページ)

  • 昨日
  • 週間
  • 月間

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

【CMS】WordPressとは?特徴・機能・導入方法・プラグインをまとめて解説

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

急成長するInstagramの動画と動画広告

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

経営判断を加速化!ERPの基本とメリット・デメリット

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

新しくなったSearch Console(サーチコンソール)の導入と使い方について

現会員424,995人

ログインはこちら

おすすめ記事

初心者にオススメ!とりあえずいれておけば安心なWordPressプラグイン10選

営業マンなら使わないともったいない!Googleマップの意外に見落とされがちな「マイマップ」機能とは

上司・先輩を、もっとスマートにエスコート!Googleマップ 便利な機能・使い方9選

思考の整理ならツールを使おう!無料マインドマップツール6選

WordPress使用者必見! 知っていると便利なSNS関連プラグイン10選

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら