且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Google Map v3 - 打开时将一个infowindow居中

更新时间:2022-12-27 14:41:14

添加对google.maps.Map.setCenter的调用在标记点击侦听器。这会将地图放在标记上:

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


I have a Google Map that works fine but I just need to tweak it so that when a marker is clicked and opens up a info window, I'd like that marker (and the map) to center on the screen. This is so that the info window is the direct focus.

If it helps, I'm using Infobox.js to create the infowindows. I've tried using Offset

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

but this doesn't center the infowindow or the map when you open the marker and its not accurate.

My 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);

Add a call to google.maps.Map.setCenter in the marker click listener. This will center the map on the marker:

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