Question

见这个screnshot：

GMaps

我不明白为什么我只在左上方看到地图的一个小方块而地图的其余部分是灰色的。我以模态形式“调用”我的地图。当我在模态表格之外“呼叫”我的地图时，一切都很好。我从那里使用Jquery Modal表格小部件：http://jqueryui.com/dialog/

html：

<div id='rayon_dialogue' title="Modifier le rayon de déplacement">
    <form action='profil.php' method='post'>
        <label>Rayon de déplacement maximal : </label>
        <input type='text' name='rayonDeplacement' id='rayonDeplacement' <?php echo "value='".$_SESSION['authentification']['rayonActivite']."'"; ?> /><br/>

        <label>Rayon de déplacement non chargé : </label>
        <input type='text' name='rayonCharge' id='rayonCharge' <?php echo "value='".$_SESSION['authentification']['rayonActiviteCharge']."'"; ?> /><br/><br/>

        <div id="container">
            <div id="map">
                <p>Veuillez patienter pendant le chargement de la carte...</p>
            </div>
        </div>

        <input type='submit' name='validerDeplacement' value='sauvegarder' />
    </form>
</div>

javascript：

<script>
    var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(45.893682,-74.161776),
  radius: 8000,
  color: '#FF00FF'
};

citymap['test'] = {
  center: new google.maps.LatLng(45.893682,-74.161776),
  radius: 6000,
  color: '#FFFF00'
};
var cityCircle;

function initialize() {
var latLng = new google.maps.LatLng(45.8911875,-74.16832060); // Correspond au coordonnées de Lille
var latLng2 = new google.maps.LatLng(45.903826,-74.245745); // Correspond au coordonnées de Lille

  var mapOptions = {
    zoom: 10,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);



  var marker = new google.maps.Marker({
    position : latLng,
    draggable:true,
    animation: google.maps.Animation.DROP,
    map      : map,
    title    : "Test"
    //icon     : image // Chemin de l'image du marqueur pour surcharger celui par défaut
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
  </script>

模态表单选项：

 $("#rayon_dialogue").dialog({
      autoOpen: false,
      width:1200,
      height:650,
      draggable: false,
      resizable:false,
      closeOnEscape: true,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

Answer 1

我相信如果你改变这个电话会有效：

google.maps.event.addDomListener(window, 'load', initialize);

到此（如果您使用的是jQuery）：

$(document).ready(function() { initialize(); });

问题是地图在文档准备好之前正在初始化，因此它不会达到div的大小，因此视口不适合它。

更新：如果这不起作用，请尝试将其添加到对话框的open事件中：

open: function() {
    initialize();
}

Google地图无法正确显示

1 个答案: