0

こんにちは私はグーグルマップでカスタムポップアップを取得するためにインフォウィンドウを使用していますが、幅を設定できません。ラッパータグにインラインで設定しようとしましたが、機能しません。この場合、750pxにする必要があります。

ここにjsfiddleがあります：http：//jsfiddle.net/xxast/そして ここにhtmlファイルがあります：http ：//www.mediafire.com/view/？66dbe6xzn1mul10

インフォウィンドウのコンテンツを設定するメソッドは次のとおりです。

 function getContent(parts, kmlEvent) {

                var content = ""+
       "<div id='width800' class='google-infobox-content' >" +
            "<div class='image'>" +
                "<img src='http://maps.google.com/maps/api/staticmap?center=" + kmlEvent.latLng.Ya + "," + kmlEvent.latLng.Za + "&amp;zoom=13&amp;size=150x150&amp;maptype=roadmap&amp;sensor=false&amp;language=&amp;markers=color:red|label:none|48.7758013,9.2529132' title='' width='150' height='150' >" +
                "<br />" +
                "<a href='https://maps.google.com/maps?sensore=true&daddr=" + kmlEvent.latLng.Za + "," + kmlEvent.latLng.Ya + "' target='_blank' >Full Google Map</a>" +
                "<a href='http://maps.google.com/help/maps/directions/Somewhere' target='_blank' >Directions</a>" +
            "</div>" +
            "<div class='location'>" +
                "<p>" + parts[0] + "</p>" +
                "<p>" + parts[1] + "</p>" +
                "<p>" + parts[2] + "</p>" +
                "<br/>" +
                "<p>" + parts[3] + "</p>" +
            "</div>" +
            "<div class='contact'>" +
                "<p>" + parts[4] + "</p>" +
                "<p>" + parts[5] + "</p>" +
                "<a href='mailto:" + parts[6] + "' >" + parts[6] + "</a>" +
                "<a href='" + parts[7] + "' target='_blank' >" + parts[7] + "</a>" +
            "</div>" +
            "<div class='others'>" +
                "<p><b>Product line</b></p>" +
                "<p>" + parts[8] + 
                "</p>" +
            "</div>" +                
        "</div>";

                return content;
            }​

ここで更新 されたのは、ラッパータグのmaxWidthとインライン幅が設定されたjsfiddleが更新されましたが、それでも機能しません：http: //jsfiddle.net/xxast/3/

4

5 に答える 5

10

google.maps.InfoWindowOptionsオブジェクトwidthにはありません。

div情報ウィンドウ内に を作成し、その幅を設定します。
情報ウィンドウは、内部に合わせてサイズが変更されdivます。

ここに実例があります：http://jsfiddle.net/RASG/vA4eQ/

編集

追加情報:

Google グループで、Google の従業員によって書かれた非常に興味深い情報を見つけました。

情報ウィンドウのサイズは、次の 2 つの要因に基づいて決定されます。

  • コンテンツのサイズ
  • マップのサイズ (ブラウザではありません)

これを回避するには、独自の種類の情報ウィンドウを実装する必要があります。

ここにいくつかの例があります:

于 2012-11-08T15:29:01.143 に答える
1 
  Use as below in your google map script

  //content = anything you like to show
  var content = '<div id="content" align="center">'+          
              '<h1 id="firstHeading" class="firstHeading" style="margin:0;color:#ff6600;">Your Title</h1>'+ 
              '<p style="color:#0d6585;font-weight:700;">Your Description'+
              '</p>'+
              '</div>';
  var infowindow = new google.maps.InfoWindow({
     content: content,
     maxWidth: 300 //your desired width
  });
于 2016-03-05T09:31:19.287 に答える
0

infoWinfow オプションで、maxWidth を 750 に設定してみてください。また、スタイルがデフォルトで上書きされないようにするために、goole 値で google-infobox-content の名前を別のものに変更します。カスタム情報ウィンドウ ライブラリを使用してみてください: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

于 2012-11-08T15:12:13.907 に答える
0

を作成し、それを使用してdiv情報ウィンドウに設定しますsetcontent

于 2012-11-09T05:35:57.130 に答える