Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.

Question

Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.

My custom-styled map pulls from a KML file with about 20 Placemarks.

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: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.

Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).

I think 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.

Thank you in advance!

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

Answer 1

Thanks to @SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.

  google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
    showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
     });

 function showInContentWindow(position, text) {
    var content = "<div>" + text +  "</div>";
    var infowindow = new google.maps.InfoWindow({
    content: content, 
    position: position,
    pixelOffset: new google.maps.Size(300, 0),
     })
 infowindow.open(map);
}