16

When I click a marker and the InfoWindow appears, the height does not adjust if the length of the content is longer that the InfoWindow default height (90px).

  • I am using text-only, no images.
  • I have tried maxWidth.
  • I have checked for inherited CSS.
  • I have wrapped my content in a div and applied my CSS to that, including a height.
  • I have even tried forcing the InfoWindow to resize with jQuery using the domready event on the InfoWindow.

I only have a few hairs left. Here is my JS:

var geocoder;
var map;
var marker;

function initialize() {
  geocoder   = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(41.8801,-87.6272); 
  var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress(infotext,address) {
  geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var image  = '/path-to/mapMarker.png';
      var infowindow = new google.maps.InfoWindow({ content: infotext, maxWidth: 200 });
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        icon: image
      });
      google.maps.event.addListener(marker, 'click', function () { 
        infowindow.open(map, marker); 
      });
    }
  });

}

function checkZipcode(reqZip) {

  if ( /[0-9]{5}/.test(reqZip) ) {

    $.ajax({
      url: 'data.aspx?zip=' + reqZip,
      dataType: 'json',
      success: function(results) {

        $.each(results.products.product, function() {

          var display = "<span id='bubble-marker'><strong>"+this.name+"</strong><br>"+
                        this.address+"<br>"+
                        this.city+", "+this.state+" "+this.zip+"<br>"+
                        this.phone+"</span>";

          var address = this.address+","+
                        this.city+","+
                        this.state+","+
                        this.zip;

          codeAddress(display,address);

        });

      },
      error: function() { $('#information-bar').text('fail'); }
    });

  } else { $('#information-bar').text('Zip codes are five digit numbers.'); }

}

$('#check-zip').click(function() { $('#information-bar').text(''); checkZipcode($('#requested-zipcode').val()); });

initialize();

InfoText and Address come from an AJAX query of an XML file. Data is not the issue, as it always comes through correctly. codeAddress() is called after the data has been retrieved and formatted.

HTML in the file:

<div id="google_map"> <div id="map_canvas" style="width:279px; height:178px"></div> </div>

CSS for my InfoWindow content (no other CSS applies to the map):

#bubble-marker{ font-size:11px; line-height:15px; }
4

5 に答える 5

9

私はついに問題の有効な解決策を見つけました。私が望んでいたほど柔軟ではありませんが、それはかなり良いです. 基本的に重要な点は、文字列をウィンドウ コンテンツとして使用するのではなく、代わりに DOM ノードを使用することです。これは私のコードです：

// this dom node will act as wrapper for our content
var wrapper = document.createElement("div");

// inject markup into the wrapper
wrapper.innerHTML = myMethodToGetMarkup();

// style containing overflow declarations
wrapper.className = "map-popup";

// fixed height only :P
wrapper.style.height = "60px";

// initialize the window using wrapper node     
var popup = new google.maps.InfoWindow({content: wrapper});

// open the window
popup.open(map, instance);

以下は CSS 宣言です。

div.map-popup {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

ps: 「インスタンス」はgoogle.maps.OverlayViewの現在のカスタム サブクラスを指します(これを拡張しています)。

于 2011-11-14T11:58:57.130 に答える
2

コンテンツを div で囲み、その高さを指定するだけです: <div style="height:60px">...</div>、たとえば

 myMarker.setContent('<div style="height:60px">' + txt + '</div>');

- 私の場合、それで十分でした。

于 2013-09-09T23:22:07.130 に答える
1

マップ キャンバスが小さすぎます。要素の幅/高さを<div id="map_canvas">大きくすると、InfoWindow が自動的に大きくなります。

そうは言っても、私が構築していたサイトでも同じ問題がありました。InfoWindow コンテンツを含む複製された div を作成し、その div の幅と高さを測定してから、InfoWindow コンテンツ div をその測定された幅と高さに設定することで解決しました。codeAddress 関数の途中に移植したコードを次に示します ( maxWidth: 200InfoWindow 宣言から を削除したことにも注意してください)。

function codeAddress(infotext,address) {
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            // Create temporary div off to the side, containing infotext:
            var $cloneInfotext = $('<div>' + infotext + '</div>')
                .css({marginLeft: '-9999px', position: 'absolute'})
                .appendTo($('body'));

            // Wrap infotext with a div that has an explicit width and height, 
            // found by measuring the temporary div:
            infotext = '<div style="width: ' + $cloneInfotext.width() + 'px; ' +
                'height: ' + $cloneInfotext.height() + 'px">' + infotext + 
                '</div>';

            // Delete the temporary div:
            $cloneInfotext.remove();

            // Note no maxWidth defined here:
            var infowindow = new google.maps.InfoWindow({ content: infotext }); 
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            google.maps.event.addListener(marker, 'click', function () { 
                infowindow.open(map, marker); 
            });
        }
    });
}
于 2011-07-10T18:02:35.547 に答える
0

インフォボックスのコンテンツをパディング付きのDIVでラップするだけです-下：30px;

JS：

map_info_window = new google.maps.InfoWindow();      
var $content = $('<div class="infobox">').html(content);
map_info_window.setContent($content.get(0));
map_info_window.open(map, marker);

CSS：

.infobox{
    padding-bottom: 30px;
}
于 2012-08-15T16:40:16.587 に答える
0

それは実際には答えではありません (DOM ノードを作成し、それをコンテンツとして使用する daveoncode のソリューションは正しいです) が、一度設定したコンテンツを動的に変更する必要がある場合 (たとえば、jQuery を使用)、gmail に infoWindow のサイズを変更させることができます:

infoWindowLinea.setContent(infoWindowLinea.getContent());
于 2014-03-08T23:13:42.430 に答える