0

私は知っています、この質問は何度も尋ねられました、そして私は以下を含むすべての可能な解決策を試しました：

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

、しかし私には何も機能しません。

そのため、非表示の地図を含むページを読み込み、ユーザーが[地図を表示]リンクをクリックしたときにのみ地図を表示する必要があります。問題は、地図がフルサイズで表示されないことです。181x186ピクセルのサイズで表示されますが、残りは灰色の正方形です。

This is my script: 

<script type="text/javascript"> 
function toggle() {
var ele = document.getElementById("map_canvas");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show map";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide map";
}
} 
</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady"></script>
<script type="text/javascript">
function handleApiReady() {
var myLatlng = new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>),
draggable: true,
icon: 'http://google-maps-icons.googlecode.com/files/factory.png', 
map: map
});

google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latitude").value = this.getPosition().lat();
document.getElementById("longitude").value = this.getPosition().lng();
});
}
</script>

<div id="map_canvas" style="display:none;width:760px;height:420px;"></div>
4

1 に答える 1

4

これは私のために働きます：

<script type="text/javascript"> 
function toggle() {
  var ele = document.getElementById("map_canvas");
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "Show map";
  }
  else {
    ele.style.display = "block";
    text.innerHTML = "Hide map";
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  }
} 
</script>

myLatlngとマップをグローバルにするとします。

実例

于 2013-01-05T15:37:48.137 に答える