На карте много маркеров, при клике по маркеру срабатывает зум, открывающиеся окно сдвигается влево, как сделать чтоб при зуме было по центру?
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//https://maps.googleapis.com/maps/api/js?key=AIzaSyCVQ3pWDCvq9N6hMfZHqFXiu0l_uR0aXLY&sensor=false
googlemapslist.style.visibility='hidden';
googlemaps.style.height = '100%';
googlemaps.style.width = '100%';
var markersArray = [];
var bounds = new google.maps.LatLngBounds();
//var styles = [{ stylers: [{ hue: "#404d75" },{ saturation: -30 }]},{ featureType: "road", elementType: "geometry", stylers: [{ lightness: -10 },] }];
//var styledMap = new google.maps.StyledMapType(styles, {name: "SHARMES"});
var mapOptions = {
maptype: 'ROADMAP',
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
var geocoder = new google.maps.Geocoder();
//map.mapTypes.set('map_style', styledMap);
//map.setMapTypeId('map_style');
var infoWindow = new google.maps.InfoWindow(), marker, i;
function initialize() {
var markers = [];
var innerlist = '';
var markers = [
[[mapMarkers]]
];
document.getElementById('googlemapslist').innerHTML = '';
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1],markers[i][2]);
if (markers[i][1] == '0' && markers[i][2]== '0') {
//alert (markers[i][3]);
//var position = new google.maps.LatLng(markers[i][1],markers[i][2]);
geocoder.geocode( { 'address': 'markers[i][3]' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
position = results[0].geometry.location;
//alert ('ii' + position);
}
else {
position = new google.maps.LatLng(markers[i][1],markers[i][2]);
}
});
}
else {
position = new google.maps.LatLng(markers[i][1],markers[i][2]);
}
//alert (position);
//var position = new google.maps.LatLng(markers[i][1],markers[i][2]);
bounds.extend(position);
if (typeof(markers[i][7]) == 'undefined') {
markers[i][7] = '0';
}
marker = new google.maps.Marker({
position: position,
center: position,
map: map,
title: markers[i][0],
popup: false,
animation : google.maps.Animation.DROP,
ppID: markers[i][5],
pID: markers[i][6],
is_rozn: markers[i][7],
contacts: markers[i][4],
address: markers[i][3],
image: markers[i][8],
mid: markers[i][9]
});
markersArray.push(marker);
//ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
innerlist = innerlist + '<div class="col1 center"><h3>' + markers[i]["0"] + '</h3><br><p>' + markers[i]["3"] + '</p>Телефон: ' + markers[i]["4"] + ' ' +'</div>';
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//ВОТ ТУТ ДОБАВЛЯЕТСЯ КОНТЕНТ ИНФООКНА МАРКЕРА
var infoWindowContent = '<center><h1>' + markers[i][0] + '</h1><br><img src="' + markers[i][8] + '" /></center><br>' + markers[i][4] + '<br><p>' + markers[i][3] + '</p>';
// map.setZoom(15);
// map.panTo(position);
// map.setCenter(position);
google.maps.event.trigger(map, 'resize');
map.setCenter(position);
//map.center = position;
map.setCenter(bounds.getCenter());
//map.fitBounds(position);
infoWindow.setContent(infoWindowContent);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
map.fitBounds(bounds);
});
google.maps.event.addListener(infoWindow,'closeclick',function(){
map.fitBounds(bounds);
});
document.getElementById('googlemapslist').innerHTML = innerlist;
showOverlay(25);
}
function showOverlays(pid) {
if (markersArray) {
document.getElementById('googlemapslist').innerHTML = '';
var innerlist = '';
infoWindow.close();
for ( i = 0; i < markersArray.length; i++ ) {
if ( (markersArray[i]["pID"]==pid) || (markersArray[i]["ppID"]==pid) ){
//markersArray[i].setMap(map);
markersArray[i].setVisible(true);
//ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
innerlist = innerlist + '<div class="col1 center"><h3>' + markersArray[i]["title"] + '</h3><img src="' + markersArray[i]["image"] + '"/><br><p>' + markersArray[i]["contacts"] + '</p> ' + markersArray[i]["address"] + ' ' + '</div>';
}
else {
//markersArray[i].setMap(null);
markersArray[i].setVisible(false);
}
}
document.getElementById('googlemapslist').innerHTML = innerlist;
}
map.fitBounds(bounds);
}
function showOverlay(id) {
if (markersArray) {
document.getElementById('googlemapslist').innerHTML = '';
var innerlist = '';
infoWindow.close();
for ( i = 0; i < markersArray.length; i++ ) {
if ( markersArray[i]["mid"]==id) {
//markersArray[i].setMap(map);
markersArray[i].setVisible(true);
//ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
innerlist = innerlist + '<div class="col1 center"><h3>' + markersArray[i]["title"] + '</h3><img src="' + markersArray[i]["image"] + '"/><br><p>' + markersArray[i]["contacts"] + '</p> ' + markersArray[i]["address"] + ' ' + '</div>';
map.setZoom(15);
map.panTo(markersArray[i]["position"]);
map.setCenter(markersArray[i]["position"]);
}
else {
//markersArray[i].setMap(null);
markersArray[i].setVisible(false);
}
}
document.getElementById('googlemapslist').innerHTML = innerlist;
}
//map.fitBounds(bounds);
}
function showOverlaysRozn(rozn) {
if (markersArray) {
infoWindow.close();
map.fitBounds(bounds);
document.getElementById('googlemapslist').innerHTML = '';
var innerlist = '';
for ( i = 0; i < markersArray.length; i++ ) {
//alert(markersArray[i]["is_rozn"]);
if ( markersArray[i]["is_rozn"]==rozn ){
markersArray[i].setVisible(true);
//ВОТ ТУТ ДОБАВЛЯЕТСЯ СТРОКА В СПИСОК
innerlist = innerlist + '<div class="col1 center"><h3>' + markersArray[i]["title"] + '</h3><img src="' + markersArray[i]["image"] + '"/><br><p>' + markersArray[i]["contacts"] + '</p>' + markersArray[i]["address"] + ' ' + '</div>';
}
else {
markersArray[i].setVisible(false);
}
}
document.getElementById('googlemapslist').innerHTML = innerlist;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Средний
