Google Map Infowindow not showing properly

Question

The infowindow is not showing properly on my map when clicking on a marker. The website is here.

You'll also notice the map control isn't properly displayed either.

    var map;     var locations = <?php print json_encode(di_get_locations()); ?>;     var markers = []     jQuery(function($){         var options = {             center: new google.maps.LatLng(51.840639771473, 5.8587418730469),             zoom: 8,             mapTypeId: google.maps.MapTypeId.ROADMAP         };         map = new google.maps.Map(document.getElementById("map_canvas"), options);          for (var i=0; i < locations.length;i++) {             makeMarker(locations[i]);         }         centerMap();      });     function makeMarker(location) {         var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};         var marker = new google.maps.Marker(markerOptions);         markers.push(marker);         var content = '';          var infowindow = new google.maps.InfoWindow(           { content: "test",             size: new google.maps.Size(50,50),             disableAutoPan : true           });           google.maps.event.addListener(marker, 'click', function(e) {             infowindow.open(map,marker);         });     }     function centerMap() {       map.setCenter(markers[markers.length-1].getPosition());     } 

Note: I'm using Google Maps JS V3.

Answer 1

The issue is forced by this format inside style.css:

img {     height: auto;     max-width: 100%;/* <--the problem occurs here*/ } 

Add this to the end of your style.css to apply the default-value for images inside the map:

#map_canvas img{max-width:none} 

Answer 2

The issue can be you are using img{ max-width: 100%; } as universal.

Try this one in to your css

.gmnoprint img {     max-width: none;  }