Google Map v3 - Wyśrodkuj okno informacyjne po otwarciu

Question

Mam Mapę Google, która działa dobrze, ale muszę ją zmodyfikować, aby po kliknięciu znacznika i otworzeniu okna informacyjnego, chciałbym aby ten znacznik (i mapa), aby wyśrodkować na ekranie. Jest tak, że okno informacyjne jest bezpośrednim fokusiem.

Jeśli to pomaga, używam Infobox.js do tworzenia infowindows. Próbowałem za pomocą przesunięcia

pixelOffset: nowy google.maps.Size (-97, -20)

ale to nie wyśrodkować infowindow lub mapę po otwarciu i marker nie jest dokładne.

Mój kod (live example):

var ib = new InfoBox(); 

function initialize() { 
var mapOptions = { 
    zoom: 12, 
    center: new google.maps.LatLng(52.204872,0.120163), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    styles: styles, 
    scrollwheel: false 
}; 
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 

    google.maps.event.addListener(map, "click", function() { ib.close() }); 

setMarkers(map, sites); 
    infowindow = new google.maps.InfoWindow({ 
    content: "loading..." 

}); 
} 

var sites = [ 
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600 <br/> <a href="http://www.frontroomcambridge.com/">Website</a></p>'], 
['Fitzwilliam Museum',52.199678,0.119931, 2, '<p>Fitzwilliam Museum <br/>Trumpington St, Cambridge, CB2 1RB <br/>01223 332900 <br/> <a href="http://www.fitzmuseum.cam.ac.uk/">Website</a></p>'], 
['Wysing Arts centre', 52.182077,-0.06977, 3, '<p>Wysing Arts Centre <br/>Fox Rd, Cambridge <br/>CB23 2TX <br/>01954 718881 <br/> <a href="http://www.wysingartscentre.org/">Website</a></p>'] 
]; 

function createMarker(site, map){ 
var siteLatLng = new google.maps.LatLng(site[1], site[2]); 
var marker = new google.maps.Marker({ 
    position: siteLatLng, 
    map: map, 
    title: site[0], 
    zIndex: site[3], 
    html: site[4], 
    icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-dot.png" 
}); 

var boxText = document.createElement("div"); 
boxText.style.cssText = "margin-top: -200px; height:200px; background: white; padding: 10px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;"; 
boxText.innerHTML = marker.html; 

var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-97, -20) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('http://visualartscambridge.org/wp-content/uploads/2013/03/box-marker.png') no-repeat" 
      ,width: "195px" 
     } 
     ,closeBoxMargin: "-185px 12px 200px 2px" 
     ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
     ,infoBoxClearance: new google.maps.Size(0, 250) 
     ,isHidden: false 
     ,alignBottom: true 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
}; 

google.maps.event.addListener(marker, "click", function (e) { 
ib.close(); 
ib.setOptions(myOptions); 
ib.open(map, this); 
}); 
return marker; 
} 

function setMarkers(map, markers) { 

for (var i = 0; i < markers.length; i++) { 
createMarker(markers[i], map); 
} 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Dodaj wezwanie do google.maps.Map.setCenter w znacznik click słuchacza. To centrum mapy na znaczniku:

google.maps.event.addListener(marker, "click", function (e) { 
ib.close(); 
ib.setOptions(myOptions); 
ib.open(map, this); 
map.setCenter(marker.getPosition()); 
});