Google Maps API の不具合?
OpenLayers(2.13.1)を利用して、GoogleMapやOpenStreetMapの地図を表示するWEBアプリを作っているのですが OpenStreetMapは表示できて、GoogleMapが表示できない現象が発生。
GoogleMapsAPIのバグ?
結論から書くとGoogleMapsAPIバグかも
現象が発生するコード(サンプルのコピペ)
<!DOCTYPE html> <html> <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> <script type="text/javascript" src="openlayers/OpenLayers.debug.js"></script> <script type="text/javascript"> var map; function init() { map = new OpenLayers.Map({ div: "map", projection: new OpenLayers.Projection("EPSG:900913") }); var osm = new OpenLayers.Layer.OSM(); var gmap = new OpenLayers.Layer.Google("Google Streets"); map.addLayers([osm, gmap]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.setCenter( new OpenLayers.LonLat(10.2, 48.9).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ), 5 ); } </script> <style> #map { width : 320px; height : 240px; } </style> </head> <body onload="init()"> <div id="map"></div> </body> </html>
↓GoogleMap
レイヤの切り替えはできるので、OpenLayers自体は問題なく動作している
情報を探しているとGoogleMapsAPIのバグレポートに同じ現象の報告を発見
Issue 8092:Bug: Map tiles not showing on page load with OpenLayers
ここでは、「OpenLayersのバグでしょう。なのでここでクローズします。」みたいなことが最後に書いてあった。
(途中にいろんなことが書いてあるけど、英語はサッパリなんだ)
GoogleMapsAPIのバグレポート内のコメントにOpenLayersのバグレポートのリンクを発見。
GoogleMapsAPIのバグレポートを読み直したら、「OpenLayersのissueに報告したよ」みたいなことを 書いてあるような気がする・・・すまねぇ英語は(ry
Incompatibility with latest Google Maps API
Incompatibility with latest Google Maps API
↓
日本語訳
↓
最新版Google Maps APIの非互換性
OpenLayersが最新版Google Maps APIに未対応??
いろいろ対策をやっている感じだったので、OpenLayersのGithubのmasterのソースを使ったけれどもGoogleMapが表示されず
結局、Google Maps APIのバージョンを3から3.20に変更したら解決
コードにするとこんな感じ
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> // ↓ <script src="http://maps.google.com/maps/api/js?v=3.20&sensor=false"></script>
↓参考
Problem with latest Google Maps API
GoogleMapsAPIの「3.20」のリリースノートで幾つか不具合を修正しているのでそれで動作するようになった可能性あり。
GoogleMapsAPIのリリースノート(v3.20)
やっぱり英語勉強しないとダメだな(するとは言っていない)
追記
この方法もGoogleMapAPIの3.20の廃止により使えなくなりました。
続きはこちら↓