如何使用多个地图指针制作谷歌地图，以在打开页面时缩放特定区域/位置

在有多个地图指针的谷歌地图中，我无法缩放到特定区域/位置。目前，它会自动将地图居中，覆盖所有位置。但我需要的是在打开网页时放大到一个特定的位置。这是我的代码，

<script>
jQuery(function ($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyA157quXbUlHHgm4wJJxzD49MivKgPSil8&sensor=false&callback=initialize";
    document.body.appendChild(script);
});
function initialize() {
    locations = <?php echo json_encode($sl_select_obj) ?>;
    markerdata = JSON.parse('<?php echo json_encode($locations_data) ?>');

    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap',
    };
    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
    // Multiple Markers''
    // $info='';
    var markers = locations;
    <?php
    $total = count($locations_data);
    $markerinfo = '';
    $c = 0;
    foreach ($locations_data as $key => $info):
        if ($c != $total):
            $markerinfo .="['<div class='"info_content'"><h2>" . $info['loctitle'] . "</h2><h3><a href=" . $info['site'] . ">" . $info['site'] . "</a></h3><h3><a href=" . $info['locpermalink'] . ">View Full Office Details</a></h3></div>'],";
        else:
            $markerinfo .="['<div class='"info_content'"><h2>" . $info['loctitle'] . "</h2><h3><a href=" . $info['site'] . ">" . $info['site'] . "</a></h3><h3><a href=" . $info['locpermalink'] . ">View Full Office Details</a></h3></div>']";
        endif;
        $c++;
    endforeach;
    ?>

    // Info Window Content                        
    var infoWindowContent = [<?php echo $markerinfo; ?>]; //markerdata; 

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    // Loop through our array of markers & place each one on the map  
    for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i]["lat"], markers[i]["long"]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i]["address"],
            icon: '<?php bloginfo('template_directory'); ?>/images/venue-direct-icon.png'
        });
        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
        this.setZoom(7);
        google.maps.event.removeListener(boundsListener);
    });
    map.fitBounds(markerBounds);
}