Карты Google, не центрирующие и масштабирующие маркеры

Question

Все мои маркеры поступают из вызова AJAX и точно размещаются на карте. Тем не менее, первоначальный вид полностью уменьшен, вдоль экватора, в Северной Америке.

Я знаю, что решение лежит где-то с bounds.extend и map.fitBounds, но, видимо, я делаю это неправильно.

У меня всегда была проблема с этим, так что надеюсь, кто-то может помочь поднять этот шип в моей стороне:

var map; 
var markers = []; 
var home_marker; 

function initialize() { 

    // Display a map on the page 
    if (document.contains(document.getElementById("map_canvas"))) { 

     bounds = new google.maps.LatLngBounds(); 
     map = new google.maps.Map(document.getElementById("map_canvas"), { 
      zoom: 12, 
      center: new google.maps.LatLng(48.4222, -123.3657) 
     }); 

     // a new Info Window is created 
     infoWindow = new google.maps.InfoWindow(); 

     // Event that closes the InfoWindow with a click on the map 
     google.maps.event.addListener(map, 'click', function() { 
      infoWindow.close(); 
     }); 

     // Add Home Marker 
     home_marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(user_address_lat, user_address_lng), 
      map: map, 
      icon: '/images/map-icon-your-home.png' 
     }); 

    } 

} 

function displayMarkers(properties) { 

    // this variable sets the map bounds and zoom level according to markers position 
    var bounds = new google.maps.LatLngBounds(); 

    // For loop that runs through the info on markersData making it possible to createMarker function to create the markers 
    for (var i = 0; i < properties.length; i++){ 

     var latlng = new google.maps.LatLng(properties[i]['latitude'], properties[i]['longitude']); 
     var price_current = properties[i]['price_current']; 
     var bedrooms = properties[i]['bedrooms']; 
     var total_baths = properties[i]['total_baths']; 
     var listing_id = properties[i]['listing_id']; 

     createMarker(latlng, price_current, bedrooms, total_baths, matrix_unique_ID); 

     // Marker’s Lat. and Lng. values are added to bounds variable 
     bounds.extend(latlng); 

    } 

    // Finally the bounds variable is used to set the map bounds 
    // with API’s fitBounds() function 
    map.fitBounds(bounds); 
} 

function createMarker(latlng, price, bedrooms, bathrooms, matrix_id) { 

    var formatted_price = accounting.formatMoney(price, '$', 0); 

    var marker = new google.maps.Marker({ 
     map: map, 
     position: latlng, 
     icon: '/images/map-icon.png' 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 

     // Variable to define the HTML content to be inserted in the infowindow 
     var iwContent = '<div class="row"><div class="small-12 columns"><img src="http://www.mywebsite.com/properties/'+listing_id+'/image-'+matrix_id+'-1.jpg"></div></div>' + 
         '<div class="row"><div class="small-12 columns"><p class="price-current text-center">'+formatted_price+'</p></div></div><hr>' + 
         '<div class="row"><div class="small-6 columns"><p class="bedrooms"><span class="fw-semi-bold">Beds:</span> '+bedrooms+'</p></div>' + 
         '<div class="small-6 columns"><p class="total-baths"><span class="fw-semi-bold">Baths:</span> '+bathrooms+'</p></div></div>'; 

     // including content to the infowindow 
     infoWindow.setContent(iwContent); 

     // opening the infowindow in the current map and at the current marker location 
     infoWindow.open(map, marker); 

    }); 

} 

// Sets the map on all markers in the array. 
function setMapOnAll(map) { 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(map); 
    } 
} 

// Removes the markers from the map, but keeps them in the array. 
function clearMarkers() { 
    setMapOnAll(null); 
} 

// Deletes all markers in the array by removing references to them. 
function deleteMarkers() { 
    clearMarkers(); 
    markers = []; 
} 

Answer 1

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