Google Map v3 - Center ein Infofenster wenn geöffnet

Question

Ich habe eine Google Map, die gut funktioniert, aber ich muss nur zwicken, so dass, wenn ein Marker angeklickt wird und öffnet ein Infofenster, ich möchte diesen Marker (und die Karte), um auf dem Bildschirm zu zentrieren. Dies ist so, dass das Informationsfenster der direkte Fokus ist.

Wenn es hilft, verwende ich Infobox.js, um die Infofenster zu erstellen. Ich habe versucht mit Offset

pixel: neue google.maps.Size (-97, -20)

aber das Zentrum nicht das Infofenster oder die Karte, wenn Sie die Markierung öffnen und es ist nicht genau.

Mein Code (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

einen Aufruf an google.maps.Map.setCenter Fügen Sie in der Klick-Listener-Marker. Dadurch wird die Karte auf dem Marker zentriert:

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