title: Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.
body: <p>Hello: I'm making progress on my Google Map (see my previous post: <a href="https://stackoverflow.com/questions/17593039/kml-markers-missing-on-google-maps-api-v3-whats-wrong/17594273#17594273">KML markers missing on Google Maps API v3: What&#39;s wrong?</a>), but I'm now stuck, and hoping for help.</p>
  
  <p>My custom-styled map pulls from a KML file with about 20 Placemarks.</p>
  
  <p>For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: <a href="https://stackoverflow.com/questions/10628175/issue-with-infowindows-remaining-active-when-another-kml-layer-is-selected-goo">Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3</a>, which I can't make work for me.</p>
  
  <p>Here is an example of what I'm looking for: <a href="http://nationaltreasures.aircanada.com/" rel="nofollow noreferrer">http://nationaltreasures.aircanada.com/</a> (its InfoWindows open to right). </p>
  
  <p><em>I think</em> I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.</p>
  
  <p>Thank you in advance! </p>
  
  <pre><code>function initialize() {
  
  var styles = [   ]; // Styles removed to simplify code
  
  var styledMap = new google.maps.StyledMapType(styles,
      {name: "HEPAC"});
  
  var mapOptions = { 
      zoom: 7,
      center: new google.maps.LatLng(46.69504, -67.69751),
      panControl: false,
          mapTypeControl: false,
          streetViewControl: false,
      noClear: true,
      zoomControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT
      },
      mapTypeControlOptions: {
          mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
      }
      };                
  
  google.maps.visualRefresh = true;  
  
  var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
  
  var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum &amp; maximum zoom level
  map.setOptions(opt);
  
  var ctaLayer = new google.maps.KmlLayer({
      url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
      preserveViewport: true,
          });
  
  ctaLayer.setMap(map);        
  
  } 
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>