Setzen von Kartenbegrenzungen für mehrere Markierungen

Question

Ich versuche Grenzen für eine Gruppe von Markierungen zu setzen, bekomme aber immer eine ganze Erdkarte. Ich habe überprüft und alle meine Marker haben richtige Koordinaten gesetzt. Hier ist mein Code in seiner Gesamtheit:

PHP

foreach ($business AS $b) { 
     $mapData .= '["'.$b->name.'", '.$b->lat.', '.$b->lon.', '.$cnt++.', '.($b->ID != '' ? 1 : 0).'],'; 
     $avgLat = $avgLat + $b->lat; 
     $avgLon = $avgLon + $b->lon; 
     $cntEnrolled = $cntEnrolled +1; 
    } 
} 

$mapData = rtrim($mapData, ","); 
$avgLat = $avgLat/$cntEnrolled; 
$avgLon = $avgLon/$cntEnrolled; 

HTML

<div id="map" class="pad0 mar0 w100p"></div> 

JS

<script>      
    function initMap() { 
      var map = new google.maps.Map(document.getElementById("map"), { 
      zoom: 14, 
      mapTypeControl: false, 
      center: { 
       lat: '.$avgLat.', 
       lng: '.$avgLon.' 
      } 
      });       
      setMarkers(map); 
    } 

    var restaurants = ['.$mapData.']; 

    function setMarkers(map) { 

     var bounds = new google.maps.LatLngBounds();    

     for (var i = 0; i < restaurants.length; i++) { 
      var restaurant = restaurants[i]; 
      var layerposit = (restaurant[4] == 1 ? 999 : restaurant[3]); 
      var marker = new google.maps.Marker({ 
       position: { 
        lat: restaurant[1], 
        lng: restaurant[2] 
       }, 
       map: map,   
       title: restaurant[0], 
       zIndex: layerposit 
      }); 
      bounds.extend(marker.getPosition()); 
     } 
     map.fitBounds(bounds); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQo-k5Tta6adY9AuEi1afno8HKvac_WoQ&callback=initMap"></script> 

Und hier ist, was gemacht wird:

Was fehlt mir?

Answer 1

Der Täter war die folgende Klasse withing Bootstrap-Tabs: .tab- Scheibe

<div role="tabpanel" class="tab-pane fade" id="mymap"> 

es herausnehmen und alle Karten Probleme verschwinden.