web-dev-qa-db-ja.com

Googleマップv3が左上隅に部分的に読み込まれ、サイズ変更イベントが機能しない

Google Maps V3は左上隅に部分的に読み込まれました。私は次の方法を試しました：

  • マップの初期化後にgoogle.maps.event.trigger(map, 'resize');を追加します。

  • インデックスファイルの<script>タグを並べ替える

しかし、私にはうまくいきません。この問題を解決する方法。この問題の公式バグと解決策はありますか？

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from LayoutIt!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap css files -->
    <link href="stylesheets/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="stylesheets/style.css" rel="stylesheet">
  </head>
  <body>
    <div id="contentbar">
      <div id="dashboard-content" class="contentbar-main">
        Some Content
      </div>
      <div id="summary-content" class="contentbar-main" style="display:none;">
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="span12">
              <div class="row-fluid">
                <div class="span7" id="sidebarid">
                  <p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
                </div>
                <div class="span5" id="contentbarid">
                  <div class="row-fluid">
                    <div class="span12">
                      <input type="button" value="toggle" id="toggle-button">
                      <div id="map-canvas" style="width:100%;height:400px;"></div>
                    </div>
                  </div>
                  <div class="row-fluid">
                    <div class="span12">
                      <p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- jQuery scripts -->
      <script type="text/javascript" src="javascripts/jquery.min.js"></script>
      <!-- Bootstrap script -->
      <script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
      <!-- My basic script file-->
      <script type="text/javascript" src="javascripts/my-script.js"></script>
      <!--Google Map server url-->
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&sensor=false"></script>
    </body>
  </html>

my-script.js

var map;
$(document).ready(function(){
  google.maps.visualRefresh = true;
    initializeMap();
});

//Load Map in Summary Tab
function initializeMap() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  google.maps.event.trigger(map, 'resize');
}
jquerygoogle-mapsgoogle-maps-api-3
26
Ramprasad

私も以前にこの問題を抱えていましたが、マップの「アイドル」状態を待って（つまり、終了したとき）、サイズ変更を呼び出して修正しました：

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

マップは、作成時には隠されていると思います。マップが内部にネストされている_display:none_ divには_#summary-content_があります。

resizeイベントをトリガーしてみてくださいafter初期化中ではなくdivが表示されるようにします。

実際、おそらくinitializeMap()関数で呼び出すのではなく、divが表示されたときに.ready()関数イベントを呼び出すことができます。

10
Michael Geary

最初にロードされたマップ以外のすべてのマップが左上隅に表示され、残りのマップはロードされず、したがって灰色で表示されるという問題がありました。

しばらく頭を悩ませていましたが、次の方法で解決できました。

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

Ian Devlinとd.raevのおかげで簡単な解決策でしたが、感謝と言って、それを解決したコードを共有したいと思っていました。

マップを作成した後にそれを呼び出しました：

map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);

この問題が発生した場合は、mapを作成した場所のすぐ下に配置してください。

4
Adam

GoogleマップはBootstrapでうまく機能しません。次のCSSをマップ要素に追加してみてください

#map-canvas img {
  max-width: none;
}

Twitter Bootstrap Googleマップに影響するCSS

2
Maksym Kozlenko

同様の問題が発生しました（アニメーションで展開されたコンテナにマップがロードされました）

ソリューションの@Ian Devlin部分は、すべてが表示された後にresizeイベントをトリガーすることです。
2番目の部分は、中央を固定することです（通常は左上隅にあります）。

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
   map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
});
1
d.raev

表示された形式でpageshowイベントを使用します。それは私のために働いた。

$（document）.on（ 'pageshow'、 '[data-role = "page"]＃mapPage'、function（）{
initialize（）; }）;

0
Tony

これは今や比較的古い質問ですが、今日この問題に出会い、解決策を見つけました。人々に役立つかもしれません（役に立たないかもしれませんが、あなたがinitilise（）このイベント内で機能し、以下のコードからわかるように遅延させます。

Google Maps API関数-initialise（）;

var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;    

    function initialise(location){
        //Object to define properties
        var mapProp = {
            center: locationLondon,
            zoom: 15,
            disableDefaultUI:true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        //Map Marker
        var marker = new google.maps.Marker({
            position: locationLondon,
            map: map
        });

        marker.setMap(map);
    };

jQueryイベント呼び出し

    $( document ).ready(function(){
        $( '#maps-container' ).hide();
        $( '#card-1 .fa-info-circle' ).click(function(event){
            event.stopPropagation();
            $( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
            $( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
            setTimeout(initialise, 1000);
        });
    });
  • '＃map-load'は、マップの初期ロードのプリローダー画面です
  • '＃maps-container'はGoogleマップ（#googleMap）のコンテナです
0
GSof