Question

我正在努力改变google maps apiv3上infoWindow的大小。我一直在看这里的文档 - https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max

但我似乎无法改变infoWidow的宽度和高度。我希望能够删除当内容对于默认窗口大时添加的滚动条。要做到这一点，我要给窗户一个固定的高度和宽度。由于某种原因，它不能正常工作。

这是我的谷歌地图JS：

var map;
var bounds;
var infowindow;
var markersArray = [];
var data;
var image = '/img/markers/google_icon.png';

function initialize() {
  console.log("Map Initialised");
  var myLatlng = new google.maps.LatLng(52.8382,-2.327815);
  var mapOptions = {
    zoom: 6,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  google.maps.visualRefresh = true;
  map = new google.maps.Map(document.getElementById('maps-canvas-xx'), mapOptions);
  bounds=new google.maps.LatLngBounds();
}
function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray = [];
}

function getMarker(event) {
   console.log("Lookup requested.");
   $('#code_search').text($('#PostcodePostcode').val());
   $('#address_search').show('slow');
  /* stop form from submitting normally */
  event.preventDefault();
  /* get some values from elements on the page: */
      var form_data = $(this).serialize(); 
      url = "http://weburl/location/a/",
      $.ajax({
        crossDomain:true, 
        dataType: "jsonp",
    url: url,
    data : form_data,
    success: function ( data ) {
        clearOverlays();
    bounds = new google.maps.LatLngBounds();
        for (var i = 0; i < data.locations.length; i++) {
        var latlng = new google.maps.LatLng(data.locations[i].lat,data.locations[i].lng); 
        var contentString =  '<div id="infoWrap"><p>' + data.locations[i].name + '</p>' +
                 '<p style="font-size:8pt;">' + data.locations[i].address.replace(/,/g,',<br>') + '<br>' + data.locations[i].post_code  + '<br>' + 
                 data.locations[i].phone + '<br>' + '<a target="_blank" href="' + data.locations[i].url + '">' + data.locations[i].url + '</p></div>';

        var infowindow = new google.maps.InfoWindow({
                    content: contentString,
                  });
        var marker = new google.maps.Marker({
                    map: map,
                    position: latlng,
                    title:data.locations[i].name,
            info: infowindow,
            content: contentString,
            icon: image,
            });



        bounds.extend(latlng);
        markersArray.push(marker);
                google.maps.event.addListener(marker, 'click', function() {
            marker.info.setContent(this.content);
            marker.info.open(map, this);
        });

            }//close each
    map.fitBounds(bounds);
        }
    });
}

我尝试添加此内容：

var infowindow = new google.maps.InfoWindow({
                    content: contentString,
            width: "800px",
                  });

但我似乎无法改变infoWindow的宽度和高度。任何帮助将不胜感激。

谢谢，

约什

Answer 1

InfoWindowOptions对象中没有width属性，只有maxWidth。要设置大小，请在contentString中的HTML标记上使用普通css。

var infowindow = new google.maps.InfoWindow({
       content: '<div style="height:200px; width: 800px;">'+ contentString+'</div>';
    });

自定义谷歌地图信息窗口

1 个答案: