2011-03-15 21 views
1

何らかの理由で、Googleマップで正しいサイズにポップアップボックスのサイズを変更できません。代わりにスクロールバー付きの小さな箱の中に入れます。Googleマップ(V3)InfoWindowのサイズが正しく設定されていない

私はグーグルを試してみましたが、これまでのすべての提案をしようとしてきたhttp://petewilliams.info/stupidmap.html

でベアボーン例まで私の問題を取り除いてきましたが、何も動作していないようにみえます。

ご迷惑をおかけして申し訳ありません。

コードは以下の通りです:

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
     #map div#pop { 
     border:  1px solid red; 
     height:  80px; 
     width:   275px; 
     } 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 

     function initialiseMap() { 
      // Load MAP 
      var latlng = new google.maps.LatLng(51.2367, -0.57177); 
      var myOptions = { 
       zoom: 13, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      var map = new google.maps.Map(document.getElementById("map"), myOptions); 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(51.2367, -0.57177), 
       map: map, 
       title:'test item' 
      }); 

      var infowindow = new google.maps.InfoWindow({ 
       content: "<div id=\"pop\">This is not 275x80px</div>", 
       maxWidth: 325 

      }); 
      infowindow.open(map,marker); 
     } 

    </script> 
</head> 
<body onload="initialiseMap();"> 

    <div id="map" style="width:580px; height:600px">Loading Map&hellip;</div> 

</body> 
</html> 

おかげ

ピート

答えて

11

は、Google MapsのAPIは、情報ウィンドウのサイズを計算した後、定義が適用されるように見えます。 CSSの宣言から#mapを削除すると、サイズが正しく設定されます。

<style> 
    div#pop { 
    border:  1px solid red; 
    height:  80px; 
    width:  275px; 
    } 
</style> 
+0

賢い、ありがとうジョナソン!申し訳ありませんが、回答を投票するのに十分なポイントがありません:( –

0

ここで読むことができる他の人のために。 Pタグの継ぎ目が自動サイズ変更を混乱させます。私はこれらの指示の束をたどったが何も助けなかった。私はまだ大きなバブルの代わりにスクロール可能なdivを持っています。私のpタグをdivタグ(divコンテナ内)に変更することは助けになりました。

関連する問題