Google Maps zoom to specific marker

Question

I'm working on my first google map, the purpose of the map is to show various markers in one city but the map should be zoomed into the marker which I set within the code.

So far I have everything working as it should but I can't figure out how to zoom to a specific marker, at the minute the maps centers and fits in all the markers. Below is my code:

<script>
    jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    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
    var markers = [
        ['Elements ll at McConachie, Edmonton', 53.634976,-113.426110],
        ['Creekwood Landing, Edmonton', 53.399758,-113.280340],
        ['Heritage Valley Station, Edmonton', 53.403244,-113.538686],
        ['Walker Lake Gate, Edmonton', 53.420672,-113.421288],
        ['Rutherford Landing, Edmonton', 53.409733,-113.533793],
        ['Vita Estates, Edmonton', 53.644733,-113.462985],
        ['Mactaggart Ridge Gate, Edmonton', 53.433462,-113.571319]
    ];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<img src="/map/images/elements-logo.png" alt="Elements ll at McConachie" />' +
        '<p><strong>Presentation Centre</strong><br/> 1060 McConachie Drive NW<br/><a href="#" target="_blank">Directions</a></p>' +        '</div>'],
        ['<div class="info_content">' +
        '<img src="/map/images/creekwood-logo.png" alt="Creekwood Landing" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/heritage-logo.png" alt="Heritage Valley Station" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/walkerlake-logo.png" alt="WalkerLake Gate" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/rutherford-logo.png" alt="Rutherford Landing" />' +
        '<p><strong>Presentation Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/vita-logo.png" alt="Vita Estates" />' +
        '<p><strong>Presentation Centre</strong><br/>1060 McConachie Drive NW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>'],
         ['<div class="info_content">' +
        '<img src="/map/images/mactarggart--logo.png" alt="Mactaggart Ridge Gate" />' +
        '<p><strong>Sales Centre</strong><br/>11803 22 Avenue SW<br/><a href="#" target="_blank">Directions</a></p>' +
        '</div>']
    ];

    // 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][1], markers[i][2]);
        bounds.extend(position);
        var iconBase = 'images/';
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: iconBase + 'carlisle_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(10);
        google.maps.event.removeListener(boundsListener);
    });

}
    </script>

Answer 1

Set the correct zoom and pass the marker position as below

map.setZoom(17);
map.panTo(currentmarker.position);

Further details can be found here Zoom in to marker google.maps

Answer 2

To center the map on the third marker, you can do this:

1. push your markers into a global array (gmarkers):

    for( i = 0; i < markers.length; i++ ) { var position = new google.maps.LatLng(markers[i][1], markers[i][2]); bounds.extend(position); var iconBase = 'images/'; marker = new google.maps.Marker({ position: position, map: map, title: markers[i][0] /*, icon: iconBase + 'carlisle_icon.png' */ }); gmarkers.push(marker); // 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); } 

2. center on the third marker (gmarkers[2]):

    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { map.setZoom(15); map.setCenter(gmarkers[2].getPosition()); google.maps.event.removeListener(boundsListener); }); 

working fiddle

Note: both map and the gmarkers array are global variables.

Answer 3

您可以尝试这样的事情：

map.setCenter(new google.maps.LatLng(53.634976, -113.426110));