谷歌地图信息窗口显示不正确答案

【问题标题】：Google Map Infowindow not showing properly谷歌地图信息窗口显示不正确
【发布时间】：2013-01-07 08:54:33
【问题描述】：

单击标记时，信息窗口未在我的地图上正确显示。网站在这里。

您还会注意到地图控件也没有正确显示。

    var map;
    var locations = <?php print json_encode(di_get_locations()); ?>;
    var markers = []
    jQuery(function($){
        var options = {
            center: new google.maps.LatLng(51.840639771473, 5.8587418730469),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), options);

        for (var i=0; i < locations.length;i++) {
            makeMarker(locations[i]);
        }
        centerMap();

    });
    function makeMarker(location) {
        var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        var content = '';

        var infowindow = new google.maps.InfoWindow(
          { content: "test",
            size: new google.maps.Size(50,50),
            disableAutoPan : true
          });


        google.maps.event.addListener(marker, 'click', function(e) {
            infowindow.open(map,marker);
        });
    }
    function centerMap() {
      map.setCenter(markers[markers.length-1].getPosition());
    }

注意：我使用的是 Google Maps JS V3。

【问题讨论】：

没有指向您网站的链接，因此不清楚您遇到了什么问题。您的问题在未来不太可能对任何用户有所帮助。
也可能是和这里描述的类似的问题：stackoverflow.com/questions/1554893/…

标签： google-maps google-maps-api-3 infowindow

【解决方案1】：

问题是由 style.css 中的这种格式造成的：

img {
    height: auto;
    max-width: 100%;/* <--the problem occurs here*/
}

将此添加到 style.css 的末尾以应用地图内图像的默认值：

#map_canvas img{max-width:none}

【讨论】：

这也为我解决了。如果有人想知道它的样子，请参阅i.stack.imgur.com/Bl8ci.png
这很明显，但它为我节省了大量时间。谢谢老兄。
天哪，谢谢！就我而言，缩放控制受到在 Bootstrap Modal 窗口中显示 mao 的影响......
谢谢，也帮我修好了。
像魅力一样工作！ (+1)

【解决方案2】：

问题可能是您使用img{ max-width: 100%; } 作为通用。

在你的 CSS 中试试这个

.gmnoprint img {
    max-width: none; 
}

【讨论】：

为什么在 1 年多后发布与接受的答案相同的内容？
@0x1gene img{max-width:100%} 会影响项目的其他 css 属性的原因。同时.gmnoprint img:{max-width: none; } 不会影响任何属性。

【解决方案3】：

在 Magento 的情况下，由于与 PROTOTYPE 库冲突，谷歌地图缩放控件没有显示。

【讨论】：

【解决方案4】：

我解决了这个问题：

.gmnoprint img {
    max-height: none;  
}

而不是max-width。

谢谢

【讨论】：

【解决方案5】：

我尝试了大多数互联网答案，但没有用（不起作用），我添加了自定义 css 和地图缩放控制可见，还启用了标记点击。 This answer also useful for this question

.gmnoprint{ 显示：阻止！重要 } .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom { 显示：块！重要； } .gm-倾斜 { 显示：无； } .gm-iv-地址{ 高度：56px； }

【讨论】：

【解决方案6】：

我也将此归结为 CSS 问题。就我而言，我们有一个库将所有 div 设置为 position:relative。设置回初始状态会弹出我们的控件。

.gm-style div {
    position:initial;
}

【讨论】：