Adding an Infobox to GoogleMaps?

Question

I'm trying to add an infobox to a number of pins on a Google map.

I've got the infobox to work previous - JSfiddle.

But i've now altered the code to include a dropdown menu. I've tried to add the infoboxes again but it doesn't work and i don't understand why it doesn't. JSfiddle. I've copied and pasted the code for the infoboxes, checked that the variable names still match up, and that the code is in the same order.

The following code is where the marker is added to the map and i'm trying to add an infobox. The function addMarker is sat within my initialisation function. And var infowindow is sat beneath the initialisation function.

function addMarker(feature) {
  var marker = new google.maps.Marker({
  position: feature.position,
  icon: feature.icon,
  map: map,
  size: 20,
  title: name,
  draggable: false, 
  //animation: google.maps.Animation.DROP
    });

   google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
        var Infocontent = feature.desc;
        infowindow.setContent(Infocontent);
        infowindow.open(map, marker); //'mouseover'
      }
     })(marker));
    }




var infowindow = new google.maps.InfoWindow();

May someone please tell me where i've gone wrong?

Answer 1

I just updated your code by creating a new fiddle and now it is showing infowindow. I just moved your infowindow code within listener definintion. Please check

    google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
   console.log('called');
        var Infocontent = feature.desc;
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent(Infocontent);
        infowindow.open(map, marker); //'mouseover'
      }
     })(marker));

JSFiddle