title: Google Map v3 - Center a infowindow when opened
body: <p>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.</p>
  
  <p>If it helps, I'm using <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html" rel="noreferrer">Infobox.js</a> to create the infowindows. I've tried using Offset </p>
  
  <blockquote>
    <p>pixelOffset: new google.maps.Size(-97, -20)</p>
  </blockquote>
  
  <p>but this doesn't center the infowindow or the map when you open the marker and its not accurate.</p>
  
  <p>My code (<a href="http://visualartscambridge.org/home/" rel="noreferrer">live example</a>):</p>
  
  <pre><code>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, '&lt;p&gt;The Frontroom &lt;br/&gt;23-25 Gwydir Street, Cambridge, CB1 2LG &lt;br/&gt;01223 305 600 &lt;br/&gt; &lt;a href="http://www.frontroomcambridge.com/"&gt;Website&lt;/a&gt;&lt;/p&gt;'],
  ['Fitzwilliam Museum',52.199678,0.119931, 2, '&lt;p&gt;Fitzwilliam Museum &lt;br/&gt;Trumpington St, Cambridge, CB2 1RB &lt;br/&gt;01223 332900 &lt;br/&gt; &lt;a href="http://www.fitzmuseum.cam.ac.uk/"&gt;Website&lt;/a&gt;&lt;/p&gt;'],
  ['Wysing Arts centre', 52.182077,-0.06977, 3, '&lt;p&gt;Wysing Arts Centre &lt;br/&gt;Fox Rd, Cambridge &lt;br/&gt;CB23 2TX &lt;br/&gt;01954 718881 &lt;br/&gt; &lt;a href="http://www.wysingartscentre.org/"&gt;Website&lt;/a&gt;&lt;/p&gt;']
  ];
  
  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 &lt; markers.length; i++) {
  createMarker(markers[i], map);
  }
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>