web-dev-qa-db-ja.com

非表示のdiv内のGoogleマップの処理方法（更新された画像）

私はページを持っています、そして、グーグルマップは最初に隠されたdivの中にあります。リンクをクリックした後、divを表示しますが、マップの左上のみが表示されます。

クリック後にこのコードを実行してみました：

    map0.onResize();

または：

  google.maps.event.trigger(map0, 'resize')

何か案は。これは、非表示のマップを含むdivを表示した後に表示される画像です。alt text

jquerygoogle-mapsgoogle-maps-api-3
127
leora

自分でテストしてみたところ、次のようにアプローチしました。わかりやすい説明が必要な場合はお知らせください

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

Javascript

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng( 0.0, 0.0 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>
103
Philar

私は同じ問題を抱えていて、divを表示するときにgoogle.maps.event.trigger(map, 'resize');を呼び出すと、問題が解決するように見えることがわかりました。

126
Eric
google.maps.event.trigger($("#div_ID")[0], 'resize');

変数マップを使用できない場合は、GMAPを含むdivの最初の要素（何か愚かなことをしたのでない限り）でなければなりません。

26
C S N

Bootstrapタブ内にGoogleマップがありましたが、正しく表示されませんでした。これは私の修正でした。

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});
13
Simon East

divのサイズを変更したときにマップを更新する方法

google.maps.event.trigger(map, 'resize');を呼び出すだけでは十分ではありません。マップの中央もリセットする必要があります。

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

サイズ変更イベントをリッスンする方法

角度（ng-showまたはui-bootstrap collapse）

Ng-showが更新される前に$ watchが起動できるため、ng-showにバインドされた値ではなく、要素の可視性に直接バインドします（したがって、divは表示されません）。

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show（）

組み込みのコールバックを使用する

$("#myMapDiv").show(speed, function() { resize(); });

ブートストラップ3モーダル

$('#myModal').on('shown.bs.modal', function() {
    resize();
})
7
civmeup

iframeコードをコピー/貼り付けしてGoogleマップを挿入し、Google Maps APIを使用したくない場合、これは簡単な解決策です。非表示のマップを表示するときに、次のjavascript行を実行するだけです。 iframe HTMLコードを取得して同じ場所に挿入するだけなので、再びレンダリングされます。

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQueryバージョン：

$('#map-wrapper').html( $('#map-wrapper').html() );

HTML：

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

次の例は、最初にBootstrap 3タブで非表示になっているマップに対して機能します。

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>
5
Gustavo

ネイティブのウィンドウサイズ変更イベントをトリガーすることも可能です。

Googleマップは自動的にリロードされます：

window.dispatchEvent(new Event('resize'));
5
Philip Miglinci

私は同じ問題を抱えていた、google.maps.event.trigger(map, 'resize')は私のために働いていませんでした。

私がやったのは、divを表示した後にマップを更新するタイマーを入れることでした...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

それがより便利な方法かどうかはわかりませんが、うまくいきます！

5
Carlos

JQueryを使用すると、このようなことができます。これにより、すぐには表示されないタブにあるUmbraco CMSでGoogleマップを読み込むことができました。

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();
4
Dennis

私のソリューションは非常にシンプルで効率的です。

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>


CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}


Jquery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map
3
midishero

または gmaps.js を使用する場合は、以下を呼び出します：

map.refresh();

divが表示されたとき。

3
Eric Saboia

John DoppelmannとHoffZが示したように、関数またはonclickイベントを示すdivで次のようにすべてのコードをまとめます。

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

それは私にとって完璧に働いた

2
Victor Tarango

私はこれが私のために働くことがわかった：

隠れる：

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

表示する：

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });
2
Victor S

Bootstrap v3タブ内で使用する場合、以下が機能するはずです。

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

ここで、tab-locationは、マップを含むタブのIDです。

2
Nirmal

元の質問は、ページの非表示のdivで初期化されるマップに関するものだと思います。表示状態に関係なく、初期化された後、ドキュメントの準備ができたら、非表示のdivでマップのサイズを変更することで、同様の問題を解決しました。私の場合、2つのマップがあり、1つは表示され、もう1つは初期化されたときに非表示になり、表示されるたびにマップを初期化したくありません。これは古い記事ですが、探している人に役立つと思います。

2
KYLO

非表示のdivが表示された後にのみマップが読み込まれるのは好きではありませんでした。たとえば、カルーセルでは、実際には機能しません。

この私の解決策は、非表示要素にクラスを追加して非表示にし、代わりに絶対位置で非表示にしてからマップをレンダリングし、マップのロード後にクラスを削除することです。

Bootstrap Carouselでテスト済み。

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

.loading { display: block; position: absolute; }

JS

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}
0
user1912899

マップを表示する場合は、このコード行を使用します。

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);
0
Ravi Darji

Divの前にこのコードを追加するか、jsファイルに渡します。

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

このイベントはdivのロード後にトリガーされるため、F5を押すことなくマップコンテンツを更新します。

0
Balibrera
 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);
0
Ravi Darji

最初の投稿。 googleMap divは、タブがクリックされるまで{display：none}のコンテナーdiv内にありました。 OPと同じ問題がありました。これは私のために働いた：

google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));

このコードを、コンテナdivタブがクリックされたコードの最後に貼り付けて、非表示のdivを表示します。重要なことは、初期化を呼び出す前に、コンテナdivが表示されている必要があるということです。

ここや他のページで提案されている多くの解決策を試しましたが、うまくいきませんでした。これがあなたのために働くかどうか私に知らせてください。ありがとう。

0
Leonard

地図を表示する際、住所をジオコーディングし、地図の中心を設定しています。 google.maps.event.trigger(map, 'resize');は機能しませんでした。

map.setZoom(14);を使用する必要がありました

以下のコード：

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });
0
Andrew

私の解決策は：

CSS：

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery：

$('.map').width(555); // width of map canvas
0
user2385294