APIキーを適正に設定しているのにGoogle Mapが表示されない！というトラブル解決の話。
正確には、WordPressの地図表示のプラグイン「SIMPLE MAP」を使用していて、なぜかスマホでだけGoogleMapが表示されない（エラー画面も何も表示されない）という症例になります。
Google Map APIキーの設定は問題なし
2016年夏ごろにGoogleの仕様変更で、GoogleMapの表示に、一部例外を除いてGoogleMap APIキーの設定が必須となりました。
具体的には、GoogleのDevelper Consoleに登録して、APIキーを発行・設定するという作業になります。この話は有名なので割愛しますが。
なお、利用サイト登録（リファラー制限）の設定を間違うという可能性もあるわけですが、この点は間違いありません。
通常は、 「*.ドメイン/*」 や「ドメイン/*」で大丈夫です。
※なお、このAPIキー関連のエラーの場合は、GoogleMapの表示エリアにコンソールエラーが表示されます。
Simple Map特有の問題か！？
使用しているプラグインが対応していないという問題も考えられました。SimpleMap自体は、GoogleのAPIキー要求に対応したアップ―デートは行っていますが、現時点（2017年11月）で、約１１カ月間更新されていなプラグインです。
この点、「SimpleMap スマホで表示されない」などでググると、解決サイトに引っかかります。数サイトで方法が変わっていたりしますが、だいたいが、プラグインのファイル内部の記述を修正するという内容です。
Simple Map プラグインの主要なファイル
・simple-map.php
・js/simple-map.js
・js/simple-map.min.js
検索で出てくる解決法は、このファイル内のAPIリンクのURLや、API記述の箇所を修正するものがほとんどです。
ネットにあった解決コード修正全て＋自分で目を皿のようにして見つけたリンクの箇所をいじっては試しを繰り返しましたが、スマホでグーグルマップが表示されない状態は全くかわらず。そもそも、コードを修正するという解決方法は、SimpleMapがGoogleMapの新仕様に対応していなかった場合の話ですよね！？
３時間ほど格闘して、結局解決せず・・・。もうあきらめようかと。
Google Static Maps APIの設定が解決だった・・・。
もうわからないので、そのうち自分で直接コードを書いて、カスタムフィールドで経度緯度設定すればいいか、とか考え、諦めかけたころ、ふと。
ずっとSimpleMapのコードを見ていてわかったのですが、SimpleMapでは、スマホでの地図表示には、static mapを使用しているようです。
maps.googleapis.com/maps/api/js
maps.googleapis.com/maps/api/staticmap
で、え？これって通常のウGoogle Mapと何が違うの？って疑問に思い調べてみると、やはり少しグループが違うようです。GoogleMapを簡易表示するAPIのようで、私も詳しくはわかりませんが、少なくとも通常使われるGoogleMapのJS APIとは独立しているようです。でGoogle APIのライブラリで調べたら、「Static Maps API」が独立した項目として出てきました・・・。
そして、「有効化」しますか？という項目もΣ（・□・；）
・・・。
今まで、有効じゃなかったんかい！そりゃ表示されないですよね・・・。
ってことで、有効化したらあったりスマホでもGoogleMapが表示されました。
↓有効化の流れ
Google APIライブラリの検索で「static」で入れれば「Static Maps API」が表示されます。
※表示させる方法は、なんでも構いませんが。
有効になっていない場合は、「有効にする」が表示されるのでクリックして有効に。
解決がわかれば、どうってことないトラブルですが、ここまで自力で辿り着くのが長かった・・・。
SimpleMapプラグインを使っていて、「なぜかスマホで地図がでないぞ！」って方は確認してみてください。
以上です。
コメント