読者です 読者をやめる 読者になる 読者になる

もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

Google Maps API の不具合?

Javascript

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&amp;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>

OpenStreetMap

f:id:monakaice88:20151018081848p:plain

↓GoogleMap

f:id:monakaice88:20151018081859p:plain

レイヤの切り替えはできるので、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に未対応??

いろいろ対策をやっている感じだったので、OpenLayersGithubのmasterのソースを使ったけれどもGoogleMapが表示されず

結局、Google Maps APIのバージョンを3から3.20に変更したら解決

コードにするとこんな感じ

<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
// ↓
<script src="http://maps.google.com/maps/api/js?v=3.20&amp;sensor=false"></script>

↓参考

Problem with latest Google Maps API

GoogleMapsAPIの「3.20」のリリースノートで幾つか不具合を修正しているのでそれで動作するようになった可能性あり。

GoogleMapsAPIのリリースノート(v3.20)

やっぱり英語勉強しないとダメだな(するとは言っていない)

追記 この方法もGoogleMapAPIの3.20の廃止により使えなくなりました。 続きはこちら↓

monakaice88.hatenablog.com