google maps info window missing images/corners

Question

The info windows in my google maps instance are lookin' funny:

Some of the images that make up the corners and extremities of the info window graphic seem to be missing. Any idea why this is happening? I'm experimenting, but haven't figured it out yet.

I'm using gmap3, a JQuery wrapper for google's V3 API. Here's my code for setting up the map (javascript/haml):

  <script>


$(window).load(function() {
  $('#map').gmap3();
  var bounds = new google.maps.LatLngBounds ();
  [email protected] do |area|
    bounds.extend(new google.maps.LatLng(#{area.latitude}, #{area.longitude}));
    $('#map').gmap3(
    {
    action:'addMarker',
    latLng:[#{area.latitude},#{area.longitude}],
    events:{click:function(marker, event){
    $(this).gmap3({action:'clear',list:['infoWindow']});
    $(this).gmap3(
    {
    action:'addInfoWindow',
    latLng:marker.getPosition(),
    infowindow:
    {content:"#{escape_javascript(link_to area.name, area)}<br>#{escape_javascript(image_tag area.image_holder.image.url(:thumb)) if area.image_holder.present?}"}
    }
    )}}
    }
    );
  $('#map').gmap3('get').fitBounds(bounds);
  $('.clickable_row').click(function() {
  var id = $(this).attr('id');
  window.location = '#{areas_path}' + '/' + id;
  });
  });
  </script>

Answer 1

I've seen this caused by a max-width rule overriding the maps one. Try setting this:

#map img { max-width: none; }