Google Map v3 - Centrare una finestra quando aperta

Question

Ho una mappa di Google che funziona bene, ma ho solo bisogno di modificarlo in modo che quando un marcatore viene cliccato e si apre una finestra informativa, mi piacerebbe quel marcatore (e mappa) per centrare sullo schermo. Questo è così che la finestra informativa è il focus diretto.

Se aiuta, sto usando Infobox.js per creare le infowindows. Ho provato con Offset

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

ma questo non centra l'infowindow o la mappa quando si apre il marcatore e non è preciso

Il mio codice (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

aggiungere una chiamata al google.maps.Map.setCenter nel marcatore click ascoltatore. Questo centrerà la mappa sul marcatore:

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