CODEWITHSUNDEEP
javascriptgoogle-mapsmapsinfowindow
chaensel
chaensel

Reputation: 183

Gmaps API v3 -> infoWindow Content not showing

I am using Google Maps API v3 on my website and am trying to display markers from a markersArray.

Here's the relevant code:

var map;
var markersArray = [];
var infowindow;
var marker;

Then I am adding the markers in a loop to the array, calling the following function

function addMarker(location, name) {
      marker = new google.maps.Marker({
      position: location,
      map: map,
      company: name,
      title: name
   });
   markersArray.push(marker);
}

I am then trying to display the markers, which works like a charm, using this function:

function showOverlays() {
   if (markersArray) {
      for (var i in markersArray) {
         markersArray[i].setMap(map);
         google.maps.event.addListener(markersArray[i], 'click', function () {
         infowindow.setContent('<div style="height:300px; color:black">' + this.title +     '</div>');
         infowindow.open(map, this);
         });
      }
   }
}

Now comes my problem: The content of the infoWindows is not showing up. It opens up, but nothing is being displayed... If I put a 300px high div in it, the infoWindow actually resizes properly.... but no content is being displayed.

I've searched the web up and down and tried fiddling with it, but to no avail.

Has anybody experienced this and might give me a hint as to how to resolve this?

Thanks in advance!

Chris

Upvotes: 3

Views: 3087

Answers (2)

chaensel
chaensel

Reputation: 183

I just found the error!

I've had the parent div (the DIV that the map canvas is in) styled with CSS... and set the z-index to 11. Apparently that prevented the content of the infowindow to be on top...

Hope that helps some people who might have done the same "mistake" :)

Thanks to kevmc for trying to help

Upvotes: 4

kevmc
kevmc

Reputation: 1294

I'm thinking that the marker object doesn't have a title attribute, you need to retrieve it using getTitle():

function showOverlays() {
   if (markersArray) {
      for (var i in markersArray) {
         markersArray[i].setMap(map);
         google.maps.event.addListener(markersArray[i], 'click', function () {
         infowindow.setContent('<div style="height:300px; color:black">' + this.getTitle() +     '</div>');
         infowindow.open(map, this);
         });
      }
   }
}

Upvotes: 0

Related Questions