Центрирование пользовательских отметок на карте Google

Всем привет, У меня возникли большие проблемы с попыткой центрировать мои пользовательские метки на карте Google и увеличить их масштаб, чтобы показать их все одновременно.

Может ли кто-нибудь понять, почему это не работает!? Вот код ниже: Спасибо !!!

 


var scriptFolder = location.pathname.substr(0, location.pathname.lastIndexOf('/') + 1);


var marker = [];


var map;


var lastZoom = 3;


var lastSizeW = 40;


var lastSizeH = 30;


function initialize() {


var styles = [


{"elementType": "geometry", "stylers": [{"visibility": "no"}]}, {"elementType": "labels", "stylers": [{"visibility": "no"}]}, {"stylers": [{"color": "#ffffff"}, {"visibility": "yes"}]}, {}


];


var styledMap = new google.maps.StyledMapType(styles);


var centerlatlng = new google.maps.LatLng(0, 0);


var myOptions = {


zoom: 3


, center: centerlatlng


, styles: styles


, panControl: true


, zoomControl: false


, mapTypeControl: false


, scaleControl: false


, streetViewControl: false


, overviewMapControl: false


, rotateControl: true


, disableDefaultUI: true


, mapTypeId: google.maps.MapTypeId.ROADMAP


};


map = new google.maps.Map(document.getElementById("map"), myOptions);


var zoomControlDiv = document.createElement('div');


var zoomControl = new ZoomControl(zoomControlDiv, map);


var image_bar = document.getElementById("pin_image_bar");


zoomControlDiv.index = 1;


map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlDiv);


map.controls[google.maps.ControlPosition.RIGHT_TOP].push(image_bar);


createMarker();


google.maps.event.addDomListener(map, 'zoom_changed', function () {


var zoom = map.getZoom();


if (zoom > lastZoom) {


lastSizeW = lastSizeW + 40;


lastSizeH = lastSizeH + 30;


for (i in marker) {


var image = new google.maps.MarkerImage(scriptFolder + "" + pins.Image, null, null, null, new google.maps.Size(lastSizeW, lastSizeH));


marker.setIcon(image);


}


}


else {


if (lastSizeW != 40 && lastSizeH != 30) {


lastSizeW = lastSizeW - 40;


lastSizeH = lastSizeH - 30;


}


for (i in marker) {


var image = new google.maps.MarkerImage(scriptFolder + "" + pins.Image, null, null, null, new google.maps.Size(lastSizeW, lastSizeH));


marker.setIcon(image);


}


}


lastZoom = zoom;


});






$('#map').children().closest('div').append(' <video loop="" autoplay="" poster="image_xi_logo_01.png" style="position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;opacity:0.7;"><source src="video_xi_bg_05a.webm" type="video/webm"> </video>');


$('.gm-style').children().children().closest('div').addClass('pins');


}


function createMarker() {


var bounds = new google.maps.LatLngBounds();


for (i in pins) {


var position = new google.maps.LatLng(pins.Lat, pins.Lng);


var image = new google.maps.MarkerImage(scriptFolder + "" + pins.Image, null, /* size is determined at runtime */ null, /* origin is 0,0 */ null, /* anchor is bottom center of the scaled image */ new google.maps.Size(lastSizeW, lastSizeH));


marker = new google.maps.Marker({


map: map


, title: pins.Name


, position: position


, icon: image


});


/*var content = '<div id="iw-контейнер">';


content += '<div class="iw-title">'+pins.Info.Title+'</div>';


content += '<div class="iw-content">';


content += '<div class="iw-subTitle">'+pins.Info.Content.Title+'</div>';


content += '<img src="images/'+pins.Image+'" alt="'+pins.Info.Title+'" height="115" width="83">';


content += '<p>'+pins.Info.Content.Detail+'</p>';


content += '</div>';


content += '<div class="iw-bottom-gradient"></div>';


content += '</div>';*/


bounds.extend(marker.getPosition());


marker.pinDetail = pins;


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


$("#pname").html(this.pinDetail.Name);


var image = "<img src='" + this.pinDetail.Image + "' style='visibility:visible;'/>"


$("#pimage").html(image);


$("#ptitle").html(this.pinDetail.Info.Title);


$("#pcontent").html(this.pinDetail.Info.Content);


document.getElementById('pin_image_bar').style.display='';


document.getElementById('overlay').style.display='';


$('#overlay').show();


$('#pin_image_bar').show();


});


}


}


function ZoomControl(controlDiv, map) {}

Код (разметка):

я только что ответил на свой вопрос, добавив сразу после «varbounds = new google.maps.LatLngBounds();» следующее:

 map.fitBounds(bounds); 
map.panToBounds(bounds); 

Код (разметка):