开发者

google maps info window missing images/corners

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

google maps info window missing images/corners

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>


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

#map img { max-width: none; } 


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.


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.


had the same problem,

just put this code into your css file:

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

}

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜