web-dev-qa-db-ja.com

Googleマップは部分的に表示され、Googleサーバーからの画像の代わりに灰色の領域が表示されます

時々、グーグルマップは部分的に他のエリアがグレーアウトされるのを伴います。 1つ問題があります。Firebugを起動すると、画像がグレーの領域に表示されます。なぜこれが起こっているのか分からない。誰もがこれを経験し、解決策を見つけた、共有してください。

javascriptgoogle-mapsgoogle-maps-api-2
59
Vishwanath

このバグは、マップのDIVのサイズを変更している場合に発生する可能性があります。サイズ変更後、gmap.checkResize()関数を呼び出してみてください。

36
Hitman_99

V3を使用している場合

google.maps.event.trigger(map, "resize");

こちら もご覧ください

80
Argiropoulos Stavros

こんにちは、あなたが関数でresizeMapを呼び出すマップコンテナを持つdivでトグルを使用している場合

associated with the trigger:
        $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
         resizeMap();
        return false;

次にresizeMap（）;このような

function resizeMap()
{
google.maps.event.trigger(map,'resize');
map.setZoom( map.getZoom() );
}

マップ変数をグローバルに設定することを忘れないでください;）

7
MRodrigues

部分的にロードされたGoogleマップの簡単なソリューションを見つけました。通常、ページの残りの部分（マップ要素を含む）が完全にロードされていないときに呼び出されるonLoad()が原因です。これにより、部分的なマップのロードが発生します。この問題を回避する簡単な方法は、onLoad bodyタグアクションを変更することです。

古い方法：

onload="initialize()"

新しい方法：

onLoad="setTimeout('initialize()', 2000);"

これは、Google JavaScriptが正しいサイズ属性にアクセスするまで2秒待機します。また、試す前にブラウザのキャッシュをクリアしてください。時々それがそこに立ち往生する:)

これは、Googleドキュメントで説明されているとおりですが、LatitudeおよびLongitudeをPHP変数、したがって= PHPスニペット。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>);
    var marker = new google.maps.Marker({ position:point, map:map })    
}
</script>
7
Milan

私はこの議論にグレーのストライプにもこの問題があり、これはgmap.Resize関数を使用するのに必要な問題ではなく、CSSにあったことを追加したいだけです。私のCSSでは

img { 
max-width:50% 
}

これをcssファイルに設定すると

#map-canvas { 
max-width:none;
}

問題は消滅しました！私はグーグル全体を見ましたが、この答えが見つかりませんでした。

4
Izekid

このスタイルは私の問題を解決しました

#map_canvas img { max-width: none !important; }

これにより、ブラウザは、マップを必要なだけ広くすることができます-!importantは本質的に「このスタイルを上書きしない」ことを意味します。

2
Ahmad Alaa

上記の解決策は私には何の役にも立ちません。

利用した display:none私の地図のために、それをvisibility:hiddenそれは私のためにうまく機能します。

変化する

display:none

に

visibility:hidden

1
Muthu17

私はこの方法でそれを解決しました、私の問題は回転装置にありました、この解決策はうまくいきます：

$scope.orientation = function(){
            var supportsOrientationChange = "onorientationchange" in window,
                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
            window.addEventListener(orientationEvent, function() {
                $interval(function(){
                    google.maps.event.trigger(map, 'resize');
                },100);
            });
        };
$scope.orientation();
0
Kike Jimenez

サイトの他の部分で作業しているときにこの問題が発生したため、開始時に気づかなかった。この1時間で行ったすべての変更を行った後、犯人に出会いました。

div
{
    [... other css ...]
    overflow: auto;
}

私のCSSで。私はそれを削除し、出来上がり、それは動作します。 （もちろん、マップdivのオーバーフロー属性を変更することもできますが、オーバーフローが必要なだけです：いくつかのdivでautoです。）十分な理由があると確信していますが、これはかなり新しいので、知っています。とにかく、これが誰かを助けることを願っています。

0
hiqwertyhi