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。

Answer 1

style.css中的这种格式强制解决了这个问题：

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

将它添加到style.css的末尾，以在地图中应用图像的默认值：

#map_canvas img{max-width:none}

Answer 2

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

在你的css中试试这个

.gmnoprint img {
    max-width: none; 
}

Answer 3

在Magento案例中，由于与PROTOTYPE库发生冲突，谷歌地图缩放控件未显示。

Answer 4

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

.gmnoprint img {
    max-height: none;  
}

而不是max-width。

由于

Answer 5

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


    .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;
    }

Answer 6

我也将其归结为CSS问题。就我而言，我们有一个将所有div设置为position：relative的库。重新设置为初始会弹出我们的控件。

.gm-style div {
    position:initial;
}

Google Map Infowindow无法正常显示

6 个答案: