WordPressでGoogleMapプラグインを選ぶならEasy Google Mapsがおススメ
サイトにGoogleMapを埋め込むのはとても簡単です。GoogleMapで用意されている埋め込みコードを、表示させたいところに貼り付けるだけ。ただ、自分の好きなようにデザインをカスタマイズして表示させたいのであればEasy Google Mapsプラグインが一番のおススメです。
具体的にできることは以下のとおり。
- 豊富な地図デザイン（カラーの変更）
- 複数マーカーの表示
- 複数地図の設置
- マーカアイコンの変更
- マーカーへのリンク
- 情報ウィンドウを表示
- スマホ対応
- サイドバーにも表示可能
※2023.01.04追記
以前は日本語対応していましたが、今はしていないようです。
【Wordpress】Easy Google Mapsの使い方
まずはGoogle Maps APIの取得しましょう。地図を表示させるためにはGoogle Maps APIが必ず必要になります。
Google Maps API取得については以下の記事を参考にしてください。
ステップ１：Google Maps APIの登録
Google Maps APIを取得したら、下のオレンジ線のところに記入して保存ボタンを押します。
ステップ２：マップの設定
【マップの追加】からマップとマーカー情報を登録していきます。重要なところだけオレンジ線で引きました。順番に見ていきましょう。
- マップ名： 好きなマップ名をつけましょう
- マップ幅： スマホにも対応させるならパーセントを選択します
- マウスホイールでズーム： パソコンで操作ミスを防ぐためチェックを外します
- 住所： どこを中心に地図を表示させるか設定できます。ここで設定しなくても右側に表示されている地図を動かして、マップを保存を押せば、その場所で表示されます
- マップズーム： 値が大きいと詳細に表示され、値が小さいと俯瞰して表示されます。スマホの見え方を調整したい場合は、Mobile Zoom Levelの値を変えます
- マップスタイル： マップのデザインやカラーを選択します
下までスクロールすると情報ウィンドウの設定画面があるので、同じく設定していきます。情報ウィンドウとはマーカーをクリックしたり、マーカーのうえにマウスをのせたときにそのマーカー情報が表示されるウィンドウのこと。
このページの設定が完了したら、右にある地図下の【マップを保存】をクリックしてください。保存をクリックせずに違うページにいくと設定が消えてしまうので注意しましょう。
ステップ３：マーカーの設定
マップの設定ができたら、マーカーの設定をしていきます。
- マーカー名： ここで記入したものが表示されます
- マーカーの詳細： マーカー名と一緒に説明文として表示されます
- アイコン： 好きなアイコンを選べます。自分で作成したアイコンも使えます
- 住所：
日本語で入力可※2019.9.03現在 日本語化ができないので候補が表示されません - マーカーのリンク： マーカーにリンクをつけたければチェックしてURLを入力する
- マウスホバーで情報ウィンドウの表示： 機能させるかどうか
- マウスホバーが外れたら情報ウィンドウを隠す： 機能させるかどうか
すべて入力したら【マーカーを保存】をクリックしてください。
マーカーを複数登録するときは、１つのマーカーを保存したら後、他の設定画面に移ること。なぜか連続してマーカーを保存することができません。必ず１つ保存したら、一旦ほかの設定ページに移り、マップを修正する形でマーカーを追加しましょう。
住所について、緯度経度で入力してください。以下のサイトで目的地を入力すれば緯度と経度が取得できます。
ステップ４：マップを表示させる
マップとマーカーの設定が終わったら、あとは出力されたコードをサイトに貼り付けるだけです。管理画面からgoolegleMap貼り付ける場合はマップショートコードを使います。phpファイルを開いて貼り付ける場合は、PHPコードを使ってください。
GoogleMapが表示されない原因は？
GooleMapが表示されない原因のほとんどはAPIキーの取得が正しくできていないことです。以下の記事を参考に設定を見直してみてください。
また、プラグインとサーバーのphpのバージョンがあっていないと表示されないことがあります。その場合はプラグインを使わず、以下の方法で表示させましょう。
おわりに…
GoogleMapを表示させるプラグインは数多くありますが、ここまでカスタマイズできるうえに無料で使えるプラグインはないでしょう。少し設定する必要はありますが、日本語化できることも大きいですね。どのプラグインか迷っているならEasy Google Mapsはおススメです。
