谷歌地图信息窗口未正确显示

Posted 2023-02-23

【中文标题】谷歌地图信息窗口未正确显示

【英文标题】：Google Map Infowindow not showing properly

【发布时间】：2012-03-28 15:13:40

【问题描述】：

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

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

    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。

【问题讨论】：

没有指向您网站的链接，因此不清楚您遇到了什么问题。您的问题在未来不太可能对任何用户有所帮助。

也可能与这里描述的问题类似：***.com/questions/1554893/…

【参考方案1】：

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

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

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

#map_canvas imgmax-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 imgmax-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;