it-swarm-ja.tech

Googleマップがページに完全に表示されませんか?

私のページには、自分で作成した検索ペインを備えたGoogleマップがあり、自由に表示および非表示にできます。それは一辺が200ピクセルのマップとしましょう。重要なのは、マップのサイズを変更したときに、ペインが重なる領域がレンダリングされない、つまり、何らかの理由でマップがそこにレンダリングされないことです。

これをチェックしてください リンク

ボックスタイプで、空港のicaoコードであるOMDBと入力してEnterキーを押します。

結果が表示され、ペインが表示されます。次に、フルスクリーンリンクをクリックし、[airports]タブをクリックしてパネルを表示しないようにします。マップの一部がまったくレンダリングされていないことがわかります。マップをドラッグする必要があり、部分的にしかレンダリングされません。そのエリア。どうすれば修正できますか?

参考までに、Windows XPのGoogle Chrome、Firefox、IE8で実行しました。地図などの完全なレンダリングを強制する方法はありますか?これはかなり不規則な問題であり、私のコードに関係するのでしょうか、それともホストの問題ですか?それともグーグルは私を好きではないのですか? :(

EDIT:側面の大きな醜いパッチを参照してください。マップもレンダリングされているはずのレンダリングされていない領域。これをクリアするのに役立つズームインやパンの量はありません:(

19
Ali

発生している問題を再現できませんが、Googleマップで見た別の問題に似ています。

グーグルマップがどのタイルが表示されているかを判断する方法を危険にさらしているようです。これは、マップが最初にdivに読み込まれるときに1回だけ計算されます。divが大きくなると、十分なマップが描画されません。幸い、これは簡単に処理できます。コンテナのサイズが変更された可能性がある場合は常に、マップインスタンスでcheckResize()メソッドを使用します。クリッピング領域は、コンテナの現在のサイズから再計算されます。

はい、コンテナーDIVの実際のピクセルの高さと幅を指定する必要があります。これは実際にはGoogle APIで詳しく説明されています。

このようなものを使用することにより:

<div id="map_canvas" style="width:500px;height:500px;"></div>

の代わりに

<div id="map_canvas"></div>

あなたは無料で家に帰ります!

14
Jay Lepore

私の見る限り、Google ChromeのOS X 10.6.2では問題なく動作します。

http://i33.tinypic.com/sfe3ah.png

唯一の問題は、コペンハーゲン空港がアプリケーションが意味する場所の近くにないことです。そしてLAXは海の真ん中にあります;-)

編集:
スクリーンショットを見ると、どうやらGoogleマップが検索および検索結果ペインで覆われていたマップの一部をレンダリングせず、その後、非表示にするとレンダリングが正しくトリガーされないようです検索ペイン。

Google Maps APIでまともなレンダートリガーを見つけることができませんでしたが、プログラムによってズームインまたはズームアウトしたり、地図の中心を他の場所に移動したり、戻ったりして、おそらく強制的に-マップのレンダリング。

または、google.maps.event.trigger(map, 'resize')など、マップの再レンダリングを開始すると思われるイベントの一部を手動でトリガーしてみることもできます。

私はこれらの提案がそれを機能させる恐ろしいハッキングの方法のように感じていることを知っています、そしてそれが機能するかどうかは非常にわかりませんが、それは私のベストショットです;-)

12
phidah

ダイアログでグーグルマップをロードしようとしたときに同じ問題に直面しました。グーグルマップがきちんとレンダリングされなかったみたいです。だから私はあなたの問題を解決するかもしれない解決策を以下に見つけます。

初期化ダイアログの後にGoogleマップのサイズ変更イベントをトリガーしました。以下の抜粋コードを確認してください。

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

例:

私はajax呼び出しによってマップをロードしてから、ダイアログを初期化し、ついにGoogleマップのサイズ変更イベントをトリガーしました。

$.ajax({
    url:"map.php",
    type:"POST",
    success:function(data){
        $("#inlineEditForm").html(data);

        $('#inlineEditPopUp').dialog('open');
        google.maps.event.trigger(map, 'resize', function () {
            // your callback content
        });
    }
});
4

JQueryプラグイン goMap を使用している場合は、以下を使用する必要があります。

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

これをイベントにラップして、マップが表示されたときに実行されるようにする必要があります。これは私のコードでどのように行うのですか?

$(document).on('click', '#mapClicker', 'initmap', function() {
   setTimeout(function() {
         google.maps.event.trigger($.goMap.map, 'resize');
      $.goMap.fitBounds();
   }, 100)
});
3
DarkMukke

Google Maps V3では、必要な魔法の少しはここに文書化されています: https://developers.google.com/maps/documentation/javascript/reference#Map イベントの下

開発者は、divがサイズを変更したときにマップでこのイベントをトリガーする必要があります:google.maps.event.trigger(map、 'resize')

トリックは、whenがこれを呼び出すことを知っていて、コードによっては状況によって異なります。 Bootstrap 3 Modalsを使用している場合、これは美しく機能します。

$("#modal-map")
    .modal()
    .on("shown.bs.modal", function() {
        google.maps.event.trigger(gmap, 'resize');
    });

ここで、gmapgoogle.maps.Map作成したオブジェクト。

3
dpjanes

私はこの質問が少し古いことを知っていますが、同じような問題に遭遇しました。しかし、私の場合、私はiframe内で(全画面効果のために)本体からロードされるようにマップを設定していました。

ジェイが答えで述べたように、widthおよびheightを指定する必要があります。

私が変更され:

<body style="margin:0;">

に:

<body style="margin:0;width:100%;height:100%">

chrome、Firefox、Internet Explorer 10に完全にロードされます。

うまくいけば、これはこの問題にも遭遇した世界中の人を助けるでしょう。 mustwidthheightを指定して、異なるクライアント間で機能するようにします。

よろしく

1
Carlos F

私は同じ問題を抱えていて、それを含むdivの幅を「%」ではなく「px」に変更するだけで解決しました(たとえば、「80%」の代わりにwidth = "700px")。私はグーグルがそのようにより良いサイズ計算をすることができると思います...私はこれを保証しませんが、それは私を助けました

0
Okultis

私の場合、Macデバイスで同じ問題が発生します:Safari 5.1.7(Os Windows 10 [申し訳ありません])Safari 5.1(Ipad 1 [旧式])Safari 10(Iphone 6 Plus)ここに私の解決策があります:1)キャプチャブラウザの幅detect.min.js 2)attrスタイルの幅パラメータを変更3)マップのサイズを変更

/* Of course insert detect.min.js and Jquery in your HTML ;)*/
var user = detect.parse(navigator.userAgent);
var browserFamily=user.browser.family;
var browserVersion=user.browser.version;
if ( browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") {
    canvasWidth = $(window).width(),
    $(".macarte").attr("style","width:"+canvasWidth+"px")
    google.maps.event.trigger(map, 'resize');
}
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */
0
Mattabile

私にはこの問題があり、(私のインスタンスでは)唯一の解決策は、要素の後にインラインでサイズ変更をトリガーすることでした。理由はわかりませんが、誰かがこの解決策も持っているスレッドを見つけました。 (参考文献なし。申し訳ありません。)私の設定は少し異なりました。それはjQueryMobileが挿入されたページからのものだったので、遅いインスタンス化は私の問題と関係があるかもしれません。うまくいけば、これは誰かを助けます。

<div id="my-map"></div>
<script type="text/javascript">
  $('#my-map').height($("#my-map-container").height());
  $('#my-map').width($("#my-map-container").width());
  google.maps.event.trigger($('#my-map'), 'resize');
</script>
0
lucygenik

手動でマップセンターを設定するときに、同じ問題に直面しました。以下のコードで解決しました:

google.maps.event.trigger(map, "center_changed");
0
ishan shah