2011-03-15 5 views
1

Pour une raison quelconque, je ne parviens pas à ce que Google Maps redimensionne sa fenêtre contextuelle aux dimensions correctes. Au lieu de cela, il le place dans une petite boîte avec des barres de défilement.Google Maps (V3) InfoWindow ne pas redimensionner correctement

J'ai déshabillé mon problème à un exemple barebones à http://petewilliams.info/stupidmap.html

J'ai essayé googler et d'essayer toutes les suggestions jusqu'à présent, mais rien ne semble fonctionner.

Toutes les idées seraient reconnaissantes reçues!

code est comme ci-dessous:

<!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> 

Merci

Pete

Répondre

11

On dirait que la définition est appliquée après l'API Google Maps calcule la taille de la InfoWindow. Lorsque je supprime #map de la déclaration CSS, il est dimensionné correctement.

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

Brillant, merci Jonathon! Désolé, je n'ai pas assez de points pour voter votre réponse :( –

0

Pour quelqu'un d'autre qui pourrait lire ici. P balise les coutures à jouer avec le redimensionnement automatique. J'ai suivi un tas de ces instructions mais rien n'a aidé. J'ai toujours un div scrollable au lieu d'une plus grande bulle. Changer mes tags p en tags div (dans un conteneur div) m'a aidé.

Questions connexes