Google Mapパネルが期待通りにリフレッシュされない

Question

現在、私のGoogleマップの実装に問題があり、私はS.O. google mapsコミュニティ。

現在、私はマーカの束を追加してマップを作成し、マーカの境界にマップを合わせます。しかし、マップが表示されているときは、マップの半分だけがmap.fitBounds（bounds）によって更新されています。

私はこのために解決するかどうかはわかりません。私はこれまでに部分的にズームされたマップを見たことがありません。

応答を送信したすべての人に事前に感謝！ここ

マップを作成するためのコードである：

<script> 
    var markersData = [ 
     @if(count($properties) > 0) 

      @foreach($properties as $property) 

       @if($property->lat == 0 && $property->lng == 0) 
        // Don't add the marker 
       @else 
        { 
         lat: "{{ $property->lat }}", 
         lng: "{{ $property->lng }}", 
         address: "{{ $property->street }}", 
         citystatezip: "{{ $property->city.', '.$property->state.' '.$property->zip }}" 
        }, 
       @endif 

      @endforeach 

     @endif 
    ]; 

    function displayMarkers(){ 

     if(markersData.length > 0){ 
      var bounds = new google.maps.LatLngBounds(); 
      for (var i = 0; i < markersData.length; i++){ 

       var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); 
       var address = markersData[i].address; 
       var citystatezip = markersData[i].citystatezip; 

       createMarker(latlng, address, citystatezip); 

       bounds.extend(latlng); 
      } 

      // JUST ADDED THIS CODE AND ITS WORKING NOW 
      google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 
       this.setZoom(map.getZoom()-1); 

       if (this.getZoom() > 15) { 
        this.setZoom(15); 
       } 
      }); 

      map.fitBounds(bounds); 

     }else{ 
      var center = new google.maps.LatLng("{{$county->lat}}", "{{ $county->lng }}"); 
      map.panTo(center); 
     } 

    } 

    function createMarker(latlng, address, citystatezip){ 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      title: address, 
     }); 

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

       var iwContent = '<div id="iw_container">' + 
         '<div class="iw_title">' + address + '</div>' + 
         '<div class="iw_content">' + citystatezip + '</div></div>'; 

      infoWindow.setContent(iwContent); 

      infoWindow.open(map, marker); 
     }); 
    } 

    function initialize() { 

     var mapOptions = { 
      zoom: 9, 
      mapTypeId: 'roadmap', 
      scrollwheel: false 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     infoWindow = new google.maps.InfoWindow(); 

     google.maps.event.addListener(map, 'click', function() { 
      infoWindow.close(); 
     }); 

     displayMarkers(); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 


</script> 

Answer 1

わかりました。私は、S.O.

私は（上記のコードを参照してください - 私はこの新しいスニペットを含めるように私のコード例を更新）マーカーを追加するコードのセクションにこのコードを追加したように、この記事への

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) { 
      this.setZoom(map.getZoom()-1); 

      if (this.getZoom() > 15) { 
       this.setZoom(15); 
      } 
     }); 

ありがとう： How to ensure that google map is loaded?

を

Answer 2

機能initMap（）{ マップ=新しいgoogle.maps.Map（のdocument.getElementById（） 'マップ'、{ ズーム：2、 センター：新しいgoogle.maps.LatLng（4、-8）、 mapTypeId： '地形' }）;

地図が最初にレンダリングされてからズームが行われている可能性があります。