SnazzyInfoWindow doesn't show on map

Question

Help me understand, please. Info window does not appear on the map, by clicking on the marker. I use google maps, and SnazzyInfoWindow to fully customize the pop-up window

 function initialize() {

  var options = {
      zoom: 13,
      center: new google.maps.LatLng(38.885765, -77.047563),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
      }
    };

  map = new google.maps.Map(document.getElementById('map'), options);

  var info = new SnazzyInfoWindow({
    marker: marker,
    content: 'content',
  });

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(38.885765, -77.047563), 
    map: map,
    icon: blueIcon
  });

  google.maps.event.addListener(marker, 'click', function() {
    info.open(map, marker);
  });
}

Answer 1

There are two issues with the provided example, the moment when info window instance is created, marker is not yet initialized:

var info = new SnazzyInfoWindow({
    marker: marker, //<-- marker is not yet initialized at this moment
    content: 'Some content goes here',
});

That's basically the reason why info window could not be opened

Another one concerns open function, according to source code it does not accept any parameters, so it needs to be replaced with:

google.maps.event.addListener(marker, 'click', function () {
    info.open();
});

Demo

 function initialize() { var options = { zoom: 13, center: new google.maps.LatLng(38.885765, -77.047563), mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false, mapTypeControl: false, streetViewControl: false, zoomControl: true, zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_BOTTOM } }; map = new google.maps.Map(document.getElementById('map'), options); var marker = new google.maps.Marker({ position: new google.maps.LatLng(38.885765, -77.047563), map: map, //icon: blueIcon }); var info = new SnazzyInfoWindow({ marker: marker, content: 'Some content goes here', }); google.maps.event.addListener(marker, 'click', function () { info.open(); }); } google.maps.event.addDomListener(window, 'load', initialize); 

 #map{ width: 640px; height: 480px; } 

 <script src="https://maps.googleapis.com/maps/api/js?key="></script> <link rel="stylesheet" href="https://rawgit.com/atmist/snazzy-info-window/master/dist/snazzy-info-window.css"> <script src="https://rawgit.com/atmist/snazzy-info-window/master/dist/snazzy-info-window.min.js"></script> <div id='map'></div>