自定義谷歌地圖信息窗口

Question

我努力改變谷歌地圖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", 
        }); 

但我似乎無法改變信息窗口的寬度和高度。任何幫助將非常感激。

謝謝，

約什

Answer 1

有一個在InfoWindowOptions對象沒有width屬性，只是一個maxWidth。要設置大小，請在contentString的HTML標記中使用正常的CSS。

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