google maps info window missing images/corners

Question

The info windows in my google maps instance are lookin' funny: info window with missing background imges

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 ();
  -@areas.each 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>

Try asking at Google Maps discussion forum: http://groups.google.com/group/google-maps-api/topics?pli=1 — AR., May 23 '11 at 21:42
Can you share your code and/or a link to the misbehaving application? — Trott, May 23 '11 at 22:09
Also, is this Google Maps API v2 or v3? (FYI, the link that @AR provided is for the v2 discussion forum.) — Trott, May 23 '11 at 22:10

score 11 · Answer 1 · answered Aug 20 '11 at 04:21

11

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

#map img { max-width: none; }

answered Aug 20 '11 at 04:21

Joel Beckham

18,254
3
35
58

Worked great. Saved me hours of pain. – praspa Jul 23 '12 at 02:29

mboeckle · Answer 2 · 2013-08-30T13:01:42.027

0

had the same problem,

just put this code into your css file:

img[src*="gstatic.com/"], img[src*="googleapis.com/"]  {
max-width: 99999px;

}

edited Aug 30 '13 at 13:01

answered Aug 30 '13 at 10:24

mboeckle

938
13
29

score 0 · Answer 3 · answered May 24 '11 at 06:59

0

I believe it has to do with low bandwidth on your connection.I think the images for the corners are timing out.Is this happening every time?Do you have problem in your connection?Try with firebug to see the network traffic and spot the image requests and if they time out.

answered May 24 '11 at 06:59

Argiropoulos Stavros

9,436
11
61
79

I'm having the same problem and it's not an issue with bandwidth. The images for the infoWindow are a css sprite - http://maps.gstatic.com/intl/en_us/mapfiles/iw3.png - so the entire image is downloaded at one time. The issue is related to the absolute positioning of each piece of the infoWindow. For some reason Google is positioning the pieces incorrectly. – joeljoeljoel Sep 07 '11 at 14:39

score 0 · Accepted Answer · answered Oct 06 '11 at 15:15

I don't know what caused this problem, but it's no longer happening. I was still getting familiar with integrating javascript and google maps into my rails apps at that point, so perhaps I goofed up some setting or js inclusion. Who knows.

Chalk it up to my noobishness.

google maps info window missing images/corners

4 Answers4