おそらく昨日からと思いますが、GoogleMapが全く表示されなくなりました。

よろしくお願い致します。

<script src="http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript"></script>
<div id="map" style="width: 560px; height: 400px"></div>

<script type="text/javascript">
//<![CDATA[
window.onload=loadMap;
var map;
var panorama;

function loadMap()
{
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(34.38, 135.00), 16);
var point = new GLatLng(34.38,135.00);
map.setCenter(point, 16);
var icon = new GIcon();
icon.image = "img/gmaproom.png";
icon.iconSize = new GSize(35, 35);
icon.iconAnchor = new GPoint(7, 35);
var markeropts = new Object();
markeropts.icon = icon;
var marker = new GMarker(point, markeropts);
map.addOverlay(marker);
map.openInfoWindowHtml(point,"HTML");
GEvent.addListener(map, "click", moveCenter);
var street = new GStreetviewOverlay();
map.addOverlay(street);
var option = { latlng:spoint };
var scontainer = document.getElementById("street");
panorama = new GStreetviewPanorama(scontainer, option);
var spoint = new GLatLng(34.38, 135.00);
panorama.setLocationAndPOV(spoint);
}
function moveCenter(overlay, point){
map.panTo(point);
panorama.setLocationAndPOV(point);
panorama.show();
}
//]]>
</script>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/11/21 05:41:17
  • 終了:2013/11/21 11:27:49

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4562ベストアンサー獲得回数19072013/11/21 09:02:50

ポイント200pt

Google Maps API V2 サポートが終了したのがきっかけみたいですね。

注: Google Maps JavaScript API バージョン 2(V2)は、2010 年 5 月 19 日に正式にサポートが終了しました。V2 の廃止スケジュールは 2013 年 5 月 19 日の予定でしたが、2013 年 11 月 19 日(太平洋時間、日本時間では 2013 年 11 月 18 日)まで延期することになりました。この日以降は V2 を使っている地図は、下位互換機能を持たせた V3 の地図に自動的に切り替わる予定です。この下位互換機能により、大部分のシンプルな地図は機能すると考えますが、この日以前に V3 へ移行を完了することを強く推奨いたします。

Google Maps JavaScript V2(非推奨) - Google Maps JavaScript API v2(サポート終了) — Google Developers

でも、V2 が動くことを期待していたところは、全滅っぽいです。

※注2 当ホームページ内のGoogleマップ V2地図は2013.11.19までは表示できましたが、2013.11.20以降 全て表示できなくなりました。Googleが準備する JavaScript wrapperで「大部分のシンプルな地図は表示できる」はずですが、原因は不明です。(2013.11.20追記)

Googleマップ V3 設置法 ~ Google Maps API V2 から V3 への移行方法

そもそも、API の要である GMap2 というオブジェクトが未定義なので、スクリプトのほぼ初っ端でエラーで止まります。
Google が「大部分のシンプルな地図は機能すると考えます」の通りにしてくれるのを待つか、V3 に移行するか...

他1件のコメントを見る
id:a-kuma3

あら、復活したんですね。

雰囲気だけですが、マニュアルと首っ引きで V3 に移植してみました。
jsFiddle で試してみたのがこちら。
http://jsfiddle.net/a_kuma3/a5Ut4/embedded/result/

座標位置が瀬戸内海の海の中なんですけど、あってますよね?

数値は、質問のコードにあったものを極力使いましたが、ふたつほど変更しています。

  • アイコンと吹き出しがかぶるので、アイコンを下にずらした
  • ストリートビューの位置指定がサービス可能な場所じゃないとはじかれるので、陸地に移動した

GStreetviewOverlay に相当するものが無いらしいのですが、ペグマン君を持ち上げた時の見た目とちょっと違います。

後、位置を移動したときのストリートビューの判定がシビアで。
ちょっとずれただけで、ペグマン君が定位置にお戻りになってしまいます orz


ソースは、こんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>


<body>

<style>
#map {
    float: left;
}
</style>

<div id="map" style="width: 560px; height: 400px"></div>
<div id="street" style="width: 560px; height: 400px"></div>

<script type="text/javascript">
window.onload=loadMap;
var map;
var panorama;

function loadMap()
{
    var point = new google.maps.LatLng(34.38,135.00);

    // Map
    var mapopts = {
        zoom: 11,
        center: new google.maps.LatLng(34.38, 135.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        // streetViewControl: false,
    };
    map = new google.maps.Map(document.getElementById("map"), mapopts);

    // Marker
    var markeropts = {
            position: point,
            map: map,
            icon: {
                    anchor: {x: 7, y: 0},   /* 場所をずらしてます */
                    size: {height: 35, width: 35},
                    url: "http://www.st-hatena.com/users/a-/a-kuma3/profile_s.gif",
                },
        };
    var marker = new google.maps.Marker(markeropts);
    google.maps.event.addListener(map, "click", moveCenter);

    // InfoWindow
    var infoopts = {
        position: point,
        content: "HTML"
    };
    var infowin = new google.maps.InfoWindow(infoopts);
    infowin.open(map);


    // Street View (Road)
    var street = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            var X = coord.x % (1 << zoom);
            return "http://cbk0.google.com/cbk?output=overlay&zoom=" + zoom + "&x=" + X + "&y=" + coord.y + "&cb_client=api";
        },
        tileSize: new google.maps.Size(256, 256),
        isPng: true,
        opacity: 0.8
    });
    map.overlayMapTypes.push(street);

    // Street View
    var scontainer = document.getElementById("street");
    var streetviewopts = {
        position: new google.maps.LatLng(34.367538,134.897579), /* 場所をずらしてます */
        pov: {
            heading: 0,
            pitch: 0,
            zoom: 1
        }
    };
    panorama = new google.maps.StreetViewPanorama(scontainer, streetviewopts);
    map.setStreetView(panorama);
}

function moveCenter(e) {
    map.panTo(e.latLng);
    panorama.setPosition(e.latLng);
}
</script>

</body>
</html>
2013/11/21 11:40:47
id:uwao

有り難うございました。
v3対応に追われてご返事が遅くなりましたが、大変、参考になりました(^v^)

2013/11/22 02:37:24
  • id:uwao
    2013年11月19日までは正常に表示出来ていましたが、マップ自体表示されなくなってしまいました。
    急いでいるので、修正点などが分かりましたら、教えて頂ければ幸いです。
    よろしくお願い致します。
    (質問の文字数の制限があり、細かく書けませんでした)

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません