Google Maps zoom to specific marker

Question

Я работаю над своей первой картой google, цель карты - показать различные маркеры в одном городе, но карта должна быть увеличена до маркера, который я установил в коде.

До сих пор у меня есть все, что нужно, но я не могу понять, как увеличить масштаб до определенного маркера, в то время как центры карт и вписываются во все маркеры. Ниже мой код:

<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

установить правильный масштаб и передать положение маркера, как показано ниже

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

Более подробную информацию можно найти здесь Zoom in to marker google.maps

Answer 2

Вы можете попробовать что-то вроде этого:

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

Answer 3

Чтобы центрировать карту на третьем маркере, вы можете сделать это:

1. толкать свои маркеры в глобальный массив (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. центр на третий маркер (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

Примечание: и карта, и массив gmarkers являются глобальными переменными.