Google Maps JavaScript APIでWebページ上にGoogle Mapsを表示させる機会が多々あるのですが、先日いくらGoogle Maps API経由でGoogle Mapsを表示させようとしても、灰色表示になってしまい、地図がうまく表示されないということがありました。
まさに、灰色一色・・・
正しく表示させようとするも、どうにもうまくいかず、かなり苦戦してしまいました。
最終的に時間をかけて対処はでき、Google Mapsも無事に表示されたのですが、対処法を記録として残しておきます。
インターネット上で探してみると、同じ状況で悩んでいる方はたくさんいらっしゃるようでした。
しかし、僕の事例とは異なるものが多かったので、今回はあくまで僕のところで起きた事例における対処法を掲載いたします！
Google Mapsがうまく表示されずに灰色・グレー表示になった状況の説明
僕が起きた事例では上記のように、タブ切り替えをすることで、それぞれのタブメニューに対応したGoogle Mapsの部分がフェイドインフェイドアウトして出てくるものになっています。
この状況で、2つ目・3つ目のGoogle Mapsの埋め込みの地図表示がうまく出なくなってしまっていました。
ちなみに、上記のサンプルはあくまでほぼ同じ状況を再現しただけで、実際に僕が陥ったソースコードはもう少し大規模なもので他にもたくさんの処理が走っているので、その点がちょっと違っています。
なので、上述のサンプルでは、Google Mapsは灰色表示にはなりません。
Google Mapsを灰色状態から通常通り表示できるようにした方法！
上述したサンプルコードにもありますが、僕は当初、Google Mapsの埋め込みの地図表示させるためのHTML要素を非表示にしてから、Google Mapsの表示命令をするようにしておりました。
この命令を逆にすることで、Google Mapsの灰色表示が解決し、通常通りにGoogle Mapsの埋め込みに地図が表示されるようになったのです！
つまり、非表示になっているHTML要素に対してGoogle Maps JavaScript APIで地図表示の処理を走らせようとしても、うまく表示されないということなんですね。
一応、ソースコードとしても掲載しておきます！
JSの12行目あたりにもありますが、先にGoogle Mapsの表示を走らせてから、要素の非表示処理をしています。
まとめ
ということでGoogle Mapsの表示が灰色・グレーになってしまって困っているという方は、地図の表示処理のタイミングを調整してみることで解決する可能性があります！
その一例として、今回のブログ記事を書いてみました！
