Blog

HOME > Web > Wordpress > プラグイン > 【WordPress】Simple MapでGoogle Mapが表示されない！

【WordPress】Simple MapでGoogle Mapが表示されない！

2016/07/09

Wordpress プラグイン

新規のWordpress案件でSimple Mapが表示されない現象があり、
何とか解決できたので備忘録をして残します。

2016/8 追記
最新版のSimple MapではAPI入力欄が追加されました。

以下は参考程度でお考えください。

サイト制作でGooglemapを表示するページを確認したらこのようになっていました。
simplemap01
WordPressのバージョンアップなのか、Simple Mapのバージョンなのかと色々と疑いましたが、
一度、冷静になってから、
改めてソースコードを見ると
「このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」
というエラーメッセージがありました。
上記で検索をしたところ、こんな記事がありました。

Googleマップの仕様が変わり、マップを利用するための「APIキー」が2016年6月22日から必須になりました。APIキーは利用者各自で取得する必要があります。

そこでAPIキーを取得することにしました。
developers-google-com_apikey
まずGoogleにログインしておくと楽に進めます。
「続ける」をクリック
apikey01
※ログインしていない場合には、ここでログイン画面に遷移します。
続いて「続行」をクリック
apikey02
ブラウザ API キーの作成では「名前」を入力し、
制限をかけたい場合には下の入力欄にURLを入力します。
apikey03
「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。
ワイルドカード( * )が使えますので * を使ってURLを設定します。
例1 *.example.com/*　　www等のサブドメインがついた example.com　と下位のURL
例2 example.com/*　　example.com　と下位のURL
（通常の場合は例1の方がよいと思います。）
入力後、「保存」を押してください。
※ここでURLを登録しないと他人のサイトでもAPIキーが使えてしまうので必ず登録してください。
これでAPIキーの画面が表示されますので念のためテキストなどに残しておきます。
さて、ここでSimple Mapが使えるかどうかもわからないので、
他の方法も考えましたが、結局、Simple MapでAPIキーを指定できないものかと考えました。
simple-map.phpにそれらしき記述があったため
simple-map.phpの60行目あたりにAPIキーを追加してみました。
wp_register_script(
'google-maps-api',
'//maps.google.com/maps/api/js?key=APIキー',
false,
null,
true
);
これで無事地図が表示されました。
simplemap02
ちなみにこの地図は緯度、経度を入力して表示しています。

もし、Simple Mapの表示で同じようにお困りの方がいましたら、一度お試しください。

それにしてもGoogleの突然の仕様変更には右往左往させられますね。





ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ