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

Question

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

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

    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。

- Jjj

---

你的网站链接已经不存在，因此你所遇到的问题不明确。就目前而言，你的问题不太可能帮助任何未来的用户。 - Simon East

它也可能是类似于这里描述的问题：https://dev59.com/CbvuzYgBFxS5KdRjTxmu - Simon East

Answer 1

问题是由style.css中的这个格式强制引起的：

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

将以下代码添加到您的style.css文件的末尾，以应用地图内部图像的默认值：

```css img { max-width: 100%; height: auto; } ```

#map_canvas img{max-width:none}

- Dr.Molle

---

这对我也解决了问题。如果有人想知道它的样子，请参见http://i.stack.imgur.com/Bl8ci.png。 - Soroush Hakami

这很明显，但它为我节省了很多时间。谢谢伙计。 - Nypam

哇，谢谢！在我的情况下，缩放控件受显示在 Bootstrap 模态窗口内的地图影响... - Jan Langer

Answer 2

问题可能是你正在通用地使用 img{ max-width: 100%; }。请将以下代码添加到你的CSS中试一下：

.gmnoprint img {
    max-width: none; 
}

- Mo.

---

为什么在一年后发布与被接受的答案相同的内容？ - 0x1gene

@0x1gene，img{max-width:100%}为什么会影响项目的其他CSS属性。同时，.gmnoprint img:{max-width: none; }不会影响任何属性。 - Mo.

Answer 3

我用以下方法解决了这个问题：

.gmnoprint img {
    max-height: none;  
}

使用 max-width 的替代方案。

谢谢。

- Vlad

Answer 4

在Magento中，由于与PROTOTYPE库的冲突，Google地图缩放控件未显示。

- Paktas

Answer 5

我尝试了大部分的网上答案但是都无用（不起作用），我添加了自定义 CSS，现在地图缩放控件可见且启用标记单击。这个答案也对此问题有帮助

    .gmnoprint{
        display: block !important
    }
    .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
        display: block !important;
    }
    .gm-tilt {
        display: none;
    }
    .gm-iv-address{
        height: 56px;
    }

- Kiran

Answer 6

我也将此追踪到CSS问题。在我的情况下，我们有一个库将所有div设置为position:relative。将其设置回initial，就可以让我们的控件回到原来的位置。

.gm-style div {
    position:initial;
}

- efru