Google Map Infowindow无法正常显示

问题描述

点击标记时，infowindow无法在我的地图上正确显示。该网站在这里。

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

  var map; 
 var locations =<？php print json_encode（di_get_locations（））; ？取代; 
 var marker = [] 
 jQuery（function（$）{
 var options = {
 center：new google.maps.LatLng（51.840639771473,5.8857418730469），
 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（）; 
 
}）; 
函数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。

解决方案

这个问题被style.css中的这种格式所强制：

  img {
 height：auto; 
 max-width：100％; / *<  - 问题出现在这里* / 
} 
  

将这个添加到您的style.css的末尾，以便为地图中的图像应用默认值：

  #map_canvas img {max-width：none} 
  

The infowindow is not showing properly on my map when clicking on a marker. The website is here.

You'll also notice the map control isn't properly displayed either.

    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());
    }

Note: I'm using Google Maps JS V3.

解决方案

The issue is forced by this format inside style.css:

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

Add this to the end of your style.css to apply the default-value for images inside the map:

#map_canvas img{max-width:none}

这篇关于Google Map Infowindow无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！