I am trying to Display Popup in Google map using infobox and Gmaps.js but Window is not opening on marker click?

Question

I am trying to display popup using infobox but infobox is not opening for Map i am using Gmaps.js script, Map is loading content perfectly but only problem with infobox. here is my code:

map = new GMaps({
    div: '#gmap_geocoding',
    lat: "20.5937",
    lng: "78.9629",
    zoom:5
});            
var icon = {
    url: "/img/marker/location-pointer.png", // url
    scaledSize: new google.maps.Size(40, 40), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};    
var infoBox;
var boxOptions = {
    disableAutoPan: true,
    alignBottom: true,
    closeBoxURL: "",
    maxWidth: 0,  // no max
    pixelOffset: new google.maps.Size(-140, -12), 
    infoBoxClearance: new google.maps.Size(1, 1) 
};
infoBox  = new InfoBox(boxOptions);
$results = $('#search-results').find('div.MapMarker');
$.each($results, function(key,value){
    var lat = $(value).data('lat');
    var lng = $(value).data('lng');
    var name = $(value).data('name');
    var sport = $(value).data('sport');
    var image = $(value).data('image');
    var contentString =
        "<div class='infoWindow text-center'><h4><a href='{{ url('/activity/') }}/{{ $vendor->vendor_slug }}/{{ $vendor->activity_slug }}'>"+ name +"</a></h4><img src='"+ image +" 'class='img-responsive' style='width:220px; height:160px;'>"+            
                "<h5><strong>Sports:</strong> "+ sport + "</h5></div>";        

    var marker = map.addMarker({
        lat:lat,
        lng:lng,
        icon: icon,
        animation: google.maps.Animation.DROP,
        title: name,
        infoBox:{
            content:contentString
        }
 });                                
});

Answer 1

1. You need to include the InfoBox external library (you may be doing that, but it isn't clear from your question).

2. You need to add a click event listener to the marker to open the InfoBox.

   var marker = map.addMarker({
       lat:lat,
       lng:lng,
       icon: icon,
       animation: google.maps.Animation.DROP,
       title: name,
       click: function(evt) {
         infoBox.setContent(contentString);
         infoBox.open(map.map, marker);
       },
       infoBox:{ // probably not required
           content:contentString
       }
});     

proof of concept fiddle

code snippet:

var map;
map = new GMaps({
  div: '#gmap_geocoding',
  lat: "20.5937",
  lng: "78.9629",
  zoom: 5
});
var icon = {
  url: "/img/marker/location-pointer.png", // url
  scaledSize: new google.maps.Size(40, 40), // scaled size
  origin: new google.maps.Point(0, 0), // origin
  anchor: new google.maps.Point(0, 0) // anchor
};
var infoBox;
var boxOptions = {
  disableAutoPan: true,
  alignBottom: true,
  closeBoxURL: "",
  maxWidth: 0, // no max
  pixelOffset: new google.maps.Size(-140, -12),
  infoBoxClearance: new google.maps.Size(1, 1),
  boxStyle: {
    opacity: 0.75,
    width: "280px",
    backgroundColor: "white",
    border: "black 1px solid"
  }
};
infoBox = new InfoBox(boxOptions);
$results = $('#search-results').find('div.MapMarker');
$.each($results, function(key, value) {
  var lat = $(value).data('lat');
  var lng = $(value).data('lng');
  var name = $(value).data('name');
  var sport = $(value).data('sport');
  var image = $(value).data('image');
  var contentString =
    "<div class='infoWindow text-center'><h4><a href='{{ url('/activity/') }}/{{ $vendor->vendor_slug }}/{{ $vendor->activity_slug }}'>" + name + "</a></h4><img src='" + image + " 'class='img-responsive' style='width:220px; height:160px;'>" +
    "<h5><strong>Sports:</strong> " + sport + "</h5></div>";

  var marker = map.addMarker({
    lat: lat,
    lng: lng,
    // icon: icon,
    animation: google.maps.Animation.DROP,
    title: name,
    click: function(evt) {
      infoBox.setContent(contentString);
      infoBox.open(map.map, marker);
    },
    infoBox: {
      content: contentString
    }
  });
});

html,
body,
#gmap_geocoding {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="gmap_geocoding"></div>
<div id="search-results">
  <div class="MapMarker" data-lat="20.5937" data-lng="78.9629" data-name="name" data-sport="baseball" data-image="http://images.clipartpanda.com/batter-clipart-silhouette_of_a_batter_swinging_a_baseball_bat_0515-0902-1110-5634_SMU.jpg" />
</div>