Question

I have two concerns regarding my Google map integration

1 . the info container is being displayed like this
2 . let it be anyone one of those three pointers i click Info Container is being shown at the same place.

how do i resolve this

Here is my code

for(var gMarker = 0; gMarker < userData.records.length ; gMarker++){
          var gMarkerThisImage = userData.records[gMarker].LatLng;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(gMarkerThisImage[0], gMarkerThisImage[1]),
            map:      map,
            title:    'U.S.A center'
          });  
          (function(Marker) {
            console.log(gMarkerThisImage[0], gMarkerThisImage[1]);
            var contentString = '<div id="imageContent">'+
                              '<img src="'+userData.records[gMarker].imagePath+'" width = "100" height="100" alt = >'+
                              '</div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString , 
                position : new google.maps.LatLng(gMarkerThisImage[0], gMarkerThisImage[1])
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
            /*google.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close(map,marker);
            });*/
          }(marker));
        }

Answer 1

I have reorganized your code, have a look at it-

var infowindow = new google.maps.InfoWindow(); //declare it globally if you want one infowindow at a time.

for(var gMarker = 0; gMarker < userData.records.length ; gMarker++){
          var gMarkerThisImage = userData.records[gMarker].LatLng;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(gMarkerThisImage[0], gMarkerThisImage[1]),
            map:      map,
            title:    'U.S.A center'
          });  
          (function(Marker) {
            console.log(gMarkerThisImage[0], gMarkerThisImage[1]);
            var contentString = '<div id="imageContent">'+
                              '<img src="'+userData.records[gMarker].imagePath+'" width = "100" height="100" alt = >'+
                              '</div>';
            myWindow(marker,contentstring);
            });
          }(marker));
        }

function myWindow(mark, content)
{
      google.maps.event.addListener(mark, 'mouseover', function() {
      infowindow.open(map,mark);
      infowindow.setContent(content);
      });
}