web-dev-qa-db-ja.com

Google Maps API V3は、TwitterのBootstrap

私はCSSを定義するためにTwitterのBootstrapを使用しています。2つのタブを持つページを作成しました。2番目のタブにはGoogleマップで作成されたマップが含まれます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>
javascriptjquerygoogle-mapstwitter-bootstrap
31
TrendyT

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

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

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

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

47
Theo

ここには多くの解決策があり、率直に言って、すべて間違っています。 Bootstrapタブのデフォルト機能をハイジャックする必要がある場合は、Bootstrapタブを使用しないでください。タブが表示されている場合でも、GMapsインターフェースに問題がある可能性があります（ズームレベルなど）。

var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
    position:myCenter
});

function initialize() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    initialize();
});

このブートプライで実際の例を見ることができます： http://www.bootply.com/102241

注：インターフェースがまだグリッチな場合は、この問題である可能性があります： Google Maps API V3：奇妙なUI表示グリッチ（スクリーンショット付き）

最新のgmaps apiを使用して、これをスタイリングに追加するだけです。

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
8
Archonic

さまざまな遅延をテストした後、私のために働く：

    $(window).resize(function() {
        setTimeout(function() {
              google.maps.event.trigger(map, 'resize');
           }, 300)            

});

それが役に立てば幸い。

6
Cyril Jacquart

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

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

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

編集：同じ答えの別のリンクを見ました Google Maps API v3、jQuery UIタブ、マップのサイズ変更なし 持っています問題を解決した後にこのリンクを見た理由は、タブのクリックイベントではサイズ変更イベントが機能せず、タブjsでは機能するという未回答の理由を見つけるためです。

4
anku_radhey

これは私のためにうまくいきます、私はjqueryタブを使用します

            setTimeout(function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(new google.maps.LatLng(default_lat, default_lng));
            map.setZoom(default_map_zoom);
        }, 2000);

このリンクから https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

2
Karim Samir

Googleマップを非表示のdivに表示するには、マップを作成してロードする前に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>
1
Memonic