Google Maps API InfoWindow not Displaying content

Question

My Code looks like this:

var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var infobox = new google.maps.InfoWindow({
            content: 'Hello world'
        });
        for(i in results){
            var marker = new google.maps.Marker({
                map: map, 
                position: results[i].geometry.location
            });
            google.maps.event.addListener(marker, 'click', function() {
                infobox.setContent('blablabla');
                infobox.open(map,marker);
                alert(infobox.content); //displays 'blablabla'
            });
        }
    }
});

Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.

Problem is: the infoWindow displays empty.

Screenshot here:

PS: Using Maps API V3

Garrygarson

have you resolved this issue? i am facing same issue – Sweeney

Answer 1

I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.

Almazan

sounded incredible but I've just had same problem and.. yes, it was white text on a white infowindow!! – Merrick

wtf yup, never getting those 2 hours of my life back. Good call. – Abstract

after 4 hours of agonizing pain and suffering, This trick solved my issue. Good catch, saved my life – Segalman

Answer 2

Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see: http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

Tantalum

Answer 3

Here is how I have done it.

var map,markersArray,infowindow; //infowindow has been declared as a global variable.

function initialize(){
    var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(51.5001524,-0.1262362),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

    infowindow = new google.maps.InfoWindow(
                    { 
                        size: new google.maps.Size(150,50)
                    });

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

    markersArray = [];
}

function createMarker(latlng, html,zoom) {
   var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });
    marker.MyZoom = zoom; 
    return marker; 
}

You can find the working example here and the complete javascript here.

Breadth

thank you very much, I have been running tests but my problem seems to lay somewhere else, because I have literally copied your code into my program, also the code on the API documentation and run it, and I still get empty InfoWindows. I will post a solution here if I ever find one. – Garrygarson

Could you confirm the browser and platform? Are you able to see my info window? Just try copying my HTML file and javascript as is on to your server, if you haven't already and see if it works. Also have you ensured that your infobox variable is declared outside the function and not inside (see line 7 of your code, remove var) – Breadth

Answer 4

I have resolved issue by adding below code.

setTimeout(function () { GeocodeMarker.info.open(GoogleMap, GeocodeMarker); }, 300);

Thanks

Andrel