31

CSS の定義に Twitter の Bootstrap を使用しています。3 つのタブがあるページを作成しました。2 番目のタブには、Google マップで作成された地図が含まれています。ただし、ページを開いてマップで 2 番目のページに切り替えると、マップが完全にレンダリングされません。Googleマップタブを選択したタブとしてページをリロードすると、マップが完全にロードされます。

同じ問題を抱えている人に次のコードをjavascriptに追加するようアドバイスしたいくつかの投稿を読みました:

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(homeLatlng);
});

ただし、これは解決策ではないようです。以下の完全なコードを見つけてください。

Javascript:

<script type="text/javascript">
function initialize() {
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(homeLatlng);
    });

    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("data.xml", function(data) {
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
                                parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
        }
    });
}
</script>

HTML:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
      <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
</div>

どうすればこれを解決できますか? タブが選択されたらGoogleマップの部分をリロードするjavascriptを追加できるかもしれませんが、これを行う方法がわかりません....

更新されたコードにはまだエラーが表示されます。

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
    <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
      function initialize() {
        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(homeLatlng);
        });

        var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        downloadUrl("data.xml", function(data) {
          var markers = data.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
           }
        });
        map.checkResize();
    }
    </script>
</div>
4

7 に答える 7

47

私もこの問題と戦っていました。私はモーダル フォームを使用していましたが、非表示のときにマップをレンダリングしました。タブが表示されたら、次のコードをトリガーする必要があります。

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

うまくいけば、それはあなたのために働くでしょう。それでもうまくいかない場合は、解決策を見つけたリンクを次に示します。たぶん、別の有益なコメントがあるでしょう。

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

于 2012-07-12T05:42:26.167 に答える
4

を使用して問題を解決しました

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

bootstrap-tab.js のshow 関数内では、ボックスを表示するときにサイズ変更イベントをトリガーする必要があり、動作することを意味します。

編集:同じ回答の別のリンクを見 ましたGoogle Maps API v3, jQuery UI Tabs, map not resizing 問題を解決した後、このリンクを見て、サイズ変更イベントが機能しない理由がまだ回答されていない理由を見つけましたタブのクリックイベントですが、タブjsで動作します

于 2013-05-21T11:05:03.617 に答える
1

非表示の div に Google マップを表示するには、マップを作成して読み込む前に div を表示する必要があります。以下に例を示します。

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

<script>
$(document).ready(function(){
  $('#button').click(function() {
    $('#map_canvas').delay('700').fadeIn();
    setTimeout(loadScript,1000);
  }); 
});

    function initialize() {
        var title= "Title";
        var lat = 50;
        var lng = 50;
        var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker = new google.maps.Marker({
            position: myLatlng,
            title:artTitle
        });
        // To add the marker to the map, call setMap();
        marker.setMap(map);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }       
</script>
于 2012-10-28T15:15:30.110 に答える