谷歌地图信息窗口缺少图像/角落答案

【问题标题】：google maps info window missing images/corners谷歌地图信息窗口缺少图像/角落
【发布时间】：2011-05-23 21:20:39
【问题描述】：

我的谷歌地图实例中的信息窗口看起来很有趣：

构成信息窗口图形角落和末端的某些图像似乎丢失了。知道为什么会这样吗？我正在尝试，但还没有弄清楚。

我正在使用gmap3，这是 google 的 V3 API 的 JQuery 包装器。这是我设置地图的代码（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>

【问题讨论】：

尝试在 Google 地图论坛上提问：groups.google.com/group/google-maps-api/topics?pli=1
你能分享你的代码和/或行为不端的应用程序的链接吗？
另外，这是 Google Maps API v2 还是 v3？（仅供参考，@AR 提供的链接是针对 v2 论坛的。）
这是 V3。我会补充这个问题。

标签： ruby-on-rails google-maps jquery-gmap3

【解决方案1】：

我已经看到这是由覆盖地图的最大宽度规则引起的。尝试设置：

#map img { max-width: none; }

【讨论】：

效果很好。为我节省了数小时的痛苦。

【解决方案2】：

我认为这与您的连接带宽低有关。我认为角落的图像超时。是否每次都发生这种情况？您的连接是否有问题？尝试使用 firebug 查看网络流量和发现图像请求以及它们是否超时。

【讨论】：

我也有同样的问题，不是带宽问题。 infoWindow 的图像是一个 css 精灵 - maps.gstatic.com/intl/en_us/mapfiles/iw3.png - 所以整个图像一次下载。该问题与每个信息窗口的绝对定位有关。出于某种原因，Google 的定位不正确。

【解决方案3】：

我不知道是什么导致了这个问题，但它不再发生了。那时我仍然熟悉将 javascript 和谷歌地图集成到我的 rails 应用程序中，所以也许我搞砸了一些设置或 js 包含。谁知道。

把它归结为我的笨拙。

【讨论】：

【解决方案4】：

遇到同样的问题，

只需将此代码放入您的 css 文件中：

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

}

【讨论】：