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

have you resolved this issue? i am facing same issue – Muneem Habib Sep 03 '15 at 10:58 — Muneem Habib, Sep 03 '15 at 10:58

score 24 · Answer 1 · answered May 08 '12 at 19:06

24

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.

answered May 08 '12 at 19:06

vim90

241
2
3

1

sounded incredible but I've just had same problem and.. yes, it was white text on a white infowindow!! – Darko Romanov Aug 03 '12 at 22:10
wtf yup, never getting those 2 hours of my life back. Good call. – TG-T Mar 09 '17 at 00:42
after 4 hours of agonizing pain and suffering, This trick solved my issue. Good catch, saved my life – Kalyan Pradhan Oct 06 '17 at 19:03

score 2 · Answer 2 · answered Nov 27 '10 at 11:15

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

answered Nov 27 '10 at 11:15

Michal

13,439
3
35
33

score 0 · Answer 3 · answered Nov 29 '10 at 16:30

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.

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. — TomWilde, Nov 29 '10 at 21:26
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`) — Philar, Nov 30 '10 at 00:59

score 0 · Answer 4 · answered Nov 17 '17 at 09:03

0

I have resolved issue by adding below code.

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

Thanks

answered Nov 17 '17 at 09:03

Nimesh

3,342
1
28
35

Google Maps API InfoWindow not Displaying content

4 Answers4

Linked