note_自己紹介_アートボード_4-02

GoogleマップがIE11で表示されない時の対処法（Google Maps API）

a-masuda

こんにちは。デザイナー1年目のマスダです。
みなさん、IE対応していますか？（IEなにそれおいしいの？と言える時代が早く来ないかな。。）

私はデザイン部のデザイナーという肩書きですが、ゴーリストではデザイナーがHTML、CSS、JavaScript（簡単なの）を書いていたりします。
企画・構想・ビジュアルを作るところから、Webで表示するところまでがお仕事ということですね。
（最近は得意な分野で分業化しようみたいな流れもあったりなかったり）

さて、本題です。
弊社HP、昨年2月にリニューアルしたのですが、どうやらIE対応は細かいところまでは行なっていなかったようです。
IEで確認してみる機会があり見てみると、盛大なレイアウト崩れはないものの、あ〜いろいろ不具合あるね〜。という状態。

大手の会社は割とまだIEユーザー多いんだよね。なんて噂も耳にするので、あぁ〜IE対応すっべかと重い腰をあげました。
（日本国内で使用されているブラウザのシェア率を調べてみると、IEは15％くらい。まだまだ多いんですね。無視できない。。）

今回はいろいろある不具合の中でも、Googleマップがうまく表示されない問題の解決方法について書きたいと思います。
（Google Maps APIを使用して表示している場合です。2018年6月からGoogleマップの埋め込みにはAPIキーが必須になっています。）


症状

IE11のコンソールには特にエラー表示は出ていないのに、マップはなにも表示されていない。
IE11以外のブラウザ（Chrome / Firefox / Edge / Safari）では問題なくマップは表示されている。

解決方法

scriptタグにdefer属性を追加せよ！
JavaScriptの読み込むタイミングに問題があったのですね。

マップを取得するためのJavaScriptの実行をHTMLがパースされた後に指定することで解決しました。

やったこと

APIキーでのマップ取得のscriptタグにdefer属性を指定する。

// 取得したAPIキーを使って、マップを取得する
<script src="http://maps.google.com/maps/api/js?key={APIキー}&language=ja" defer></script>

// マップのカスタマイズをするJavaScriptを読み込む
<script src="ファイルのパス（../map.jsなど）"></script>

上記のような感じです。
（マップ表示のためのAPIキーの取得から実際の表示の仕方についてはこちらが詳しいです。）

scriptタグにdeferやasyncの属性をつけることで、スクリプト実行のタイミングを変えることができるそうです。
この属性を指定しないデフォルトではHTMLのパースを中断して、JavaScriptのファイルの読み込みと実行が行われる仕様みたいです。
（script読み込み・実行タイミングについての参考記事はこちら。）
（もっと詳しくブラウザの仕組みについて知りたい方はこちら。）

ここにトラップがあり…！
本家のドキュメントには、APIキーを取得するためのscriptタグにasyncとdeferの両方の属性が指定されていました。（asyncもdeferもスクリプトの読み込み・実行タイミングを調整するものです）（2つを指定する意味はあるのでしょうか…？）
ここから、asyncの属性を削除すると、見事にIE11でマップが表示されるようになりました！

どうしてasyncはダメでdeferならOKなのか、はっきりとした理由は私にはわかりませんが、なにはともあれ、私の場合はscriptタグにdefer属性だけをつけることにより、IE11でGoogleマップが表示されるようになりました。


IE11でお困りの誰かにこの情報が届けばいいなと思います。。


上記以外の対処法

いろいろググってみると、IE11でマップが表示されずに困っている方がたくさんいそうです。

下記私が調べた範囲でこうすれば上手くいく場合があるというのをリンクとともに載せておきます。参考までに〜

Internet Explorer の「互換表示」機能が原因かも！？
HTTPS制限しているのに、HTTPでAPIにアクセスしているのが原因かも！？
描画領域のサイズ指定をしていないのが原因かも！？

リンクはないけれど、
・古いバージョンのAPIキーを使用している
・リクエストの回数が多すぎてAPI利用が制限されている
なども原因として考えられるようです。

また、scriptタグに文字コード「charset="utf-8"」の指定を追加してみるなどで解決される場合もあるとか。

IEの挙動はよくわからないですね〜あぁ〜大変だ〜。。。

いいなと思ったら応援しよう！