web-dev-qa-db-ja.com

埋め込みGoogleマップは、Webページのサイズを変更するまで間違って表示されます

ウェブページに地図を表示して、地図から座標を取得しようとしています。うまく機能し、マーカーをドラッグアンドドロップして、入力ボックスの座標を取得できます。

しかし、私の問題は、Webページを読み込むときに発生します。すべてがうまく表示されていますが、マップでは、ここでマップの表示方法を確認できます。

Wrong map

しかし、この瞬間にウェブページのサイズを変更すると、フルスクリーンの場合は半分になります。または、画面の一部である場合は、少し大きくまたは小さくします。次に、正しいマップが表示されます。 right map

（それは同じ場所ではありません、私は知っています。2回のリロードから画像を撮りました）

WebページをHTMLで作成しますが、個別のWebページであるかのように呼び出します。インデックスをロードすると、このボタンが表示されます

href:<a href="#openMap">

そして、示される部分は次のようになります。

<div data-role="page"  id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
    blablabla
    <div data-role="content">
        <form action="">
            <div id="map_canvas" style="width:500px; height:300px"></div>
            blablabla

そして、すべてのdiv、フォーム...は適切に閉じられました。ここには入れていない入力ボックスとフィールドがたくさんあります。

次に、私のGoogleマップスクリプトでこれを持っています：

var map;
function initializeNewMap() {
  var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);

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

  var marker = new google.maps.Marker({
      draggable: true,
      position: myLatlng, 
      map: map,
      title: "Your location"
  });

}

しかし、なぜサイズを変更する必要があるのか​​わかりません。それを解決する方法ですか？

編集：さらに情報を追加します：

このようにマップがあるWebページの一部を次のように呼び出します。

$(document).on("pageinit", '#openMap', function() {

入れてみた

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

その直後に何も起こりません。

解決：

私は他の質問で解決策を見つけました（ Google Maps v3は左上隅に部分的にロードされ、サイズ変更イベントは機能しません 、Ian Devlinの投稿）：

あるユーザーがここで言ったように、マップのサイズを変更する必要があります。しかし、その行だけでは機能しませんでした。初期化関数の最後にこのコードを追加しました。

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

したがって、マップが表示された後に呼び出されます。

javascripthtmlgoogle-maps
46
Biribu

私もこの問題に直面しました。Googleマップresizeイベントをトリガーすることで解決しました。

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

更新：

var map;
function initializeNewMap() {
 // add your code
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  google.maps.event.trigger(map, 'resize');
}

ご理解ください。

19
Praveen

同様の問題がありましたが、マップがまったく表示されませんでした（ボックス全体が灰色でした）。

私にとってそれを解決したのは、マップを含むdivが非表示として開始されていることを認識していたことです

display:none;

代わりに使用する場合

visibility:hidden;

Divはサイズを保持しますが、非表示として表示されるため、初期化時にマップは値0ではなく正しい高さと幅を使用します

お役に立てれば！

9
WongKongPhooey

修正方法：

コンテナ（マップを配置する場所）が表示された後、マップを初期化する必要があります。

同様に、多くのタブがあり、最後のタブにマップが含まれているため、この問題を次の方法で修正しました。

$('#map-tab').click(function() {
    // init map
});

ここでは、最初にコンテナが可視性を取得することを確認し（その要素をクリックすると、マップを含むセクションが表示されます）、マップを初期化します

これはうまくいきました。

0
APu

JavaScriptベースのレイアウトヘルパー（ Foundation Equalizer など）を使用する場合、マップをロードする前に、マップコンテナーのサイズが確定していることを確認して、悪名高いグレーマップと特定のcenterなどの属性は期待どおりに機能します。または、サードパーティプラグインのイベントを使用して、マップをfixesするカスタムコールバックをトリガーします。例えば。：

var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
    google.maps.event.trigger(map, 'resize');
});
0
Álvaro González

私のマップは Twitter Bootstrap tab で非表示になっていたため、マップの初期化時に表示されなかったため、タブを選択したときにresizeを呼び出す必要がありました：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {                 
    google.maps.event.trigger(map, 'resize');
})
0
Matthew