Jquery 谷歌地图信息窗口没有'；t打开/显示：无

我目前正在为一家杂货店做一个商店定位器。他们的网站是用Drupal构建的，但我正在从头开始编写商店定位器，而不是使用Drupal模块

到目前为止，一切似乎都很顺利，但我不明白为什么当有人单击标记时，我的信息窗口不显示。在做了一些研究并尝试了不同的东西之后，下面的代码似乎有些响应： 单击标记时，地图会重新居中，为气泡腾出空间，但气泡永远不会显示

更新：

经过更多的测试后，我发现这些气泡确实产生了。标记就在那里，但出于某种原因，google在其容器中添加了一个display:none内联样式。现在我想知道我怎样才能防止这种情况

非常感谢您的任何想法/帮助

(function ($) {
Drupal.behaviors.storelocator = {
    attach: function (context, settings) {        

        var map;
        var markers_array = [];

        google.maps.event.addDomListener(window, 'load', function() {
            var mapOptions = {
                  position: new google.maps.LatLng(41.030, -73.411),
                  zoom: 10,
                  maxZoom: 16,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var bounds = new google.maps.LatLngBounds();

            $.get('/storelocator/storexml', function(xml) {                         
                $(xml).find('marker').each(function() {
                    var banner_name = $(this).attr('name');
                    var address = $(this).attr('address');
                    var distance = parseFloat($(this).attr('distance'));
                    var latlng = new google.maps.LatLng(parseFloat($(this).attr('lat')), parseFloat($(this).attr('lng')));

                    createMarker(map, latlng, banner_name, address);
                    bounds.extend(latlng);
                    map.fitBounds(bounds);
                });
            });
    });



        function createMarker(map, latlng, banner_name, address) {

            var icon_image = {
                url: '/sites/default/modules/storelocator/images/' + banner_name + '.png',
                size: new google.maps.Size(25, 30),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12, 30)
            }
            var icon_shadow = {
                url: '/sites/default/modules/storelocator/images/shadow.png',
                size: new google.maps.Size(40, 30),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(12, 30)
            }
            var clickable_area = {
                coord: [1, 1, 1, 30, 25, 30, 30, 1],
                type: 'poly'
            }
            var marker = new google.maps.Marker({
                map: map,
                position: latlng,
                shadow: icon_shadow,
                icon: icon_image,
                shape: clickable_area,
                title: address,
                html: '<strong>' + banner_name + '</strong><br/>' + address
            });

            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(this.html);
                infoWindow.open(map, this); 
            });

            markers_array.push(marker);
        }

    }
};
}(jQuery));

（函数（$）{
Drupal.behaviors.storelocator={
附加：函数（上下文、设置）{
var映射；
变量标记_数组=[]；
google.maps.event.addDomListener（窗口'load'，函数（）{
变量映射选项={
位置：新google.maps.LatLng（41.030，-73.411），
缩放：10，
maxZoom:16，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var bounds=new google.maps.LatLngBounds（）；
$.get（'/storelocator/storexml'，函数（xml）{
$（xml）.find（'marker'）.each（function（）{
var banner_name=$（this.attr（'name'）；
var address=$（this.attr（'address'）；
var distance=parseFloat（$（this）.attr（'distance'）；
var latlng=new google.maps.latlng（parseFloat（$（this.attr（'lat'）），parseFloat（$（this.attr（'lng'））；
createMarker（地图、板条、旗帜名称、地址）；
边界扩展（latlng）；
映射边界（bounds）；
});
});
});
函数createMarker（地图、板条、旗帜名称、地址）{
变量图标\u图像={
url:'/sites/default/modules/storelocator/images/'+banner_name+'.png'，
尺寸：新谷歌地图尺寸（25,30），
来源：新google.maps.Point（0,0），
主持人：新谷歌地图点（12,30）
}
变量图标\u阴影={
url:“/sites/default/modules/storelocator/images/shadow.png”，
尺寸：新谷歌地图尺寸（40,30），
来源：新google.maps.Point（0,0），
主持人：新谷歌地图点（12,30）
}
变量可点击区域={
坐标：[1,1,1,30,25,30,30,1]，
类型：“poly”
}
var marker=new google.maps.marker({
地图：地图，
位置：latlng，
阴影：图标\u阴影，
icon:icon_图像，
形状：可点击的区域，
标题：地址，
html:“”+banner\u name+”
“+地址
});
google.maps.event.addListener（标记'click'，函数（）{
setContent（this.html）；
打开（地图，这个）；
});
markers_array.push（标记器）；
}
}
};
}（jQuery））；

在这里我只是做了一个很好的猜测，但我想说的是，一定要将您对infoWindow的定义移到createMarker函数之外，就像每次调用createMarker一样，您实际上是在重新定义infoWindow，并且肯定会失去以前创建的标记的范围

编辑：另一个选项是将infoWindow实际分配给它自己的标记，例如：marker.infoWindow=etc.等等，marker.infoWindow.setContent（etc.等等）。但我想说这可能是不必要的，因为我给你的第一个选项通常是最佳实践

你试过这个吗：

看起来你的问题可能有相同的原因，尽管我不确定它是什么。因此，在链接的答案中，尝试以下方法：

function addInfoWindow(marker, content) {
    var infoWindow = new google.maps.InfoWindow({
        content: content
    });

    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.open(map, marker);
    });
}

---

你的标记在哪里？气泡窗口在哪里？我在这里看不到？？你有什么javascript错误？你能提供一个JSFIDLE或一个指向显示问题的地图的链接吗？一点javascript错误都没有。我不能提供链接，因为项目在VPN后面。将infoWindow的定义移到createMarker之外不会改变任何问题e行为。点击时提醒内容起作用，但打开时隐藏了气泡。将infoWindow分配给标记本身会阻止地图做出任何反应。好吧，这是一个快速猜测，但我仍然坚持说不要一直重新定义infoWindow。只有其他事情，你验证了“/sites/default/modules/storelocator/im”ages/'+banner_name+'.png'实际上是正确的，并且可以在浏览器中访问？否则，如果您尝试不使用自定义图标shadow&shape的默认标记，会发生什么情况？那么它可以工作吗？没关系，我想的是标记图标，而不是信息窗口，我认为标记图标不会对其产生负面影响