CODEWITHSUNDEEP
javascriptphpjquerygoogle-maps
santa
santa

Reputation: 12512

Setting map bounds for multiple markers

I am trying to set bounds for a group of markers, but keep getting an entire earth map. I have checked and all my markers have proper coordinates set. Here's my code in it's entirety:

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>

And here's what is rendered: enter image description here

What am I missing?

Upvotes: 1

Views: 748

Answers (1)

santa
santa

Reputation: 12512

The culprit was the following class withing bootstrap tabs: .tab-pane

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

Take it out and all the map issues go away.

Upvotes: 1

Related Questions