How to make openInfoWindowHtml work in Google Maps 2

Question

I'm setting up a extjs panel with a GMap2 embedded. Here's the setup:

 map = new GMap2(document.getElementById("gmappanel"));
 map.setCenter(new GLatLng(58.019257, -115.572402), 3);
 map.setUIToDefault();

I'm using the example from here so that when I click a marker, I get an info window. The problem is, the event fires and I can see the proper HTML in the console, but nothing else happens. The info window simply doesn't open. no error, nothing.

Here's the code for that:

 function createMarker(point, val) {
    var marker = new GMarker(point);
    var name = val.data.name;
    var html = "<table class='marker'>";
    html += "<tr><td>Name: </td><td>" + name + "</td></tr>";
    html += "</table>";

    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
        debug("Marker fired");
    });

    return marker;
}

Here's how I call it:

 var marker = createMarker(point,store.getAt(i));

Any ideas?

Answer 1

Sounds like your HTML is not valid. Can you dump some example html data that you are passing to the openInfoWindowHtml? Your createMarker function works just fine with :

var html = "<table class='marker'><tr><td>Name: </td><td> sometext </td></tr></table>";

what version of the api are you using? 2.x?

Answer 2

Possibly you want bindInfoWindowHtml, not openInfoWindowHtml.

Something along the lines of..

function createMarker(point, val) {
    var marker = new GMarker(point);
    var name = val.data.name;
    var html = "<table class='marker'>";
    html += "<tr><td>Name: </td><td>" + name + "</td></tr>";
    html += "</table>";
    marker.bindInfoWindowHtml(html);
    return marker;
}