谷歌地图不显示正确

GMaps

我不明白为什么我只看到地图上的一个小广场在左上角和地图的其余部分是灰色的。我以模态形式“呼叫”我的地图。当我在模态窗体外面“呼叫”我的地图时，一切正常。我使用从那里Jquery的模式窗体控件：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 
     } 
    });

来源

2013-10-14 seb

做工精细对我来说，我imgur – seb

再次上传它，我认为它仍在加载地图 –

如果我把这个代码：

Veuillez patienter pendant le chargement de la carte...

在模态形式之外一切正常。在我的屏幕截图中，我可以拖动左上方的小方块来查看更多地图，但它会继续回到左上角。 – seb

我相信，它的工作原理如果您更改此呼叫：

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

这个（如果你使用jQuery）：

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

的问题是，该地图被初始化前的文件已经准备好，所以也没有得到div的大小，所以视口不适合它。

UPDATE：如果不工作，尝试将其添加到open事件对话框：

open: function() { 
    initialize(); 
}

来源

2013-10-14 17:42:53 DontVoteMeDown

使用在我的对话框的打开事件中添加initialize（）。 http://jsfiddle.net/jsBsw/ – seb

@seb尼斯。当我发现'ready'事件不起作用时，我在发布原始答案后有了这个想法。 – DontVoteMeDown

谷歌地图不显示正确

回答

相关问题