google map API v3でなんか地図がガタガタというか灰色になってたりずれてたりする表示がおかしい問題を解決する的なお話

google map API v3を使うと楽に地図を表示する事が出来る。
何が良いかっていうとレスポンシブサイトとかも簡単に対応してくれたり、
地図にピンを落としたりとかすっごく簡単に出来る。

けどなぜか地図がガタガタだったり一部灰色になってたりして上手く読み込まれていない感じになってしまうことがある。
ということで今日はそれを解決するお話をば。

上の画像のようにこんな感じで表示がおかしかったりする。
なんていうかところどころ灰色になってたり一部表示がずれていたり。

これについてはimgタグに対してCSSでzoomプロパティを設定しているのが原因っぽい。
あとはmax-widthを設定しているのも原因っぽい。
max-widthの設定が原因かどうかは確認していないので微妙なところではあるけど、
max-width:100%じゃなくてmax-width:97.5%とかであればありえそうな感じ。

で、なんでか推測してみたけど、
google map API v3ってcanvasで諸々データを呼び出しているんだけど、
このcanvas内で読み込んでいる画像(imgタグ)に対してzoomプロパティとかが設定されているせいで、
表示がおかしくなったんじゃないかなと思う。
実際にzoomプロパティを削除したら正常に表示されたので。

ってなわけでzoomプロパティをimgタグ全体にに使うのであれば、

img{
  zoom:.5;
}

#map_canvas img{
  zoom:1;
}

みたいな感じでgoogle map内のimgに対してはzoomプロパティを1にしてあげるとかの必要がある。
で、max-widthも同じく100%もしくはmax-width:0;みたいにしてあげればいいんじゃないかと。

もしくは使いたいところだけにzoomプロパティを設定してあげるとか。

ってな感じで解決が出来るかと。
zoomプロパティとか使えば意外と簡単に小さくしたりとか出来たりするんだけど、
使うならばimgタグ全体とかじゃなくて使いたいところだけに使うとかっていうのがいいかもね的なみたいな。