Google Maps API infoWindowAnchor not working?

Question

Hello everyone,

I am trying to get the infoWindow to display in just the right place on a Google Maps integration I'm working on (just above the top right/top left corner of an image). Whenever I try to adjust the "infoWindowAnchor" it doesn't seem to be working? However, the "iconAnchor" seems to be working as expected. I am wondering if anyone has ever run into a similar scenario before? I am making use of a custom icon, but even when I revert back to the standard icons provided by Google, the infoWindow seems to be displaying incorrectly (The tail is centered on the icon as opposed to being placed in it's top right position).

Below is the code I'm using to get this all working. The Important bits are here, but I've removed some of the other functions that may get in your way when diagnosing.

$(document).ready(function() {

    var centerLatitude = 37.782112;
    var centerLongitude = -122.419281;
    var sanFran = new GLatLng(centerLatitude, centerLongitude); 
    var startZoom = 12;
    var map;
    var icon;

    // Creates a default icon using our tuberent image
    var myIcon = new GIcon();
    myIcon.image = baseurl + 'my/imageFolder/markerFolder/image.png';
    myIcon.shadow = baseurl + 'my/imageFolder/markerFolder/shadow.png';
    myIcon.iconSize = new GSize(25,25);
    myIcon.shadowSize = new GSize(38,25);
    myIcon.iconAnchor = new GPoint(13,25);
    myIcon.infoWindowAnchor = new GPoint(13,0);
    myIcon.printImage = baseurl + 'my/imageFolder/markerFolder/printImage.gif';
    myIcon.mozPrintImage = baseurl + 'my/imageFolder/markerFolder/mozPrintImage.gif';
    myIcon.printShadow = baseurl + 'my/imageFolder/markerFolder/printShadow.gif';
    myIcon.transparent = baseurl + 'my/imageFolder/markerFolder/transparent.png';
    myIcon.imageMap = [22,0,22,1,22,2,21,3,21,4,21,5,21,6,21,7,23,8,24,9,24,10,22,11,22,12,22,13,22,14,22,15,22,16,22,17,22,18,22,19,22,20,22,21,22,22,22,23,22,24,2,24,1,23,1,22,1,21,1,20,1,19,1,18,1,17,1,16,1,15,1,14,1,13,1,12,1,11,0,10,0,9,1,8,3,7,4,6,5,5,7,4,8,3,9,2,10,1,11,0];

    map = new GMap2(document.getElementById('map'));
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl3D());
    map.setCenter(sanFran, startZoom);

    /* Some Random Code and Functions here ....  */

    var point = new GLatLng(location.lat, location.lng);
    var marker = new GMarker(point, myIcon);
    map.addOverlay(marker);

    /* Some Random Code and Functions here ....  */

    GEvent.addListener(marker, "click", function(){
     var randomText = "Just some random test text";
     var myHtml = "<b>#" + location.id + "</b><br/>" + location.neighborhood + "<br/>" + randomText;
     map.openInfoWindowHtml(point, myHtml);
    });
});

$(document.body).unload(function() {
    if (GBrowserIsCompatible()) {
     GUnload();
    }
});

Answer 1

You could also try setting the pixel offset in the GInfoWindowOptions of openInfoWindowHTML().

Can you move the info window at all? By setting very large values just to test?

Otherwise, I doubt this is the answer, but I'd try it just in case.

From Google Maps API: "Once we've created a map via the GMap2 constructor, we need to initialize it. This initialization is accomplished with use of the map's setCenter() method. The setCenter() method requires a GLatLng coordinate and a zoom level and this method must be sent before any other operations are performed on the map, including setting any other attributes of the map itself."

You're adding a couple of controls before calling setCenter().

Answer 2

Thank you, dnyce. I had the same problem. Thanks for posting this....