google.maps.event.trigger nasıl kullanılır? (Harita, 'yeniden boyutlandır')

Question

JS için yeni ve önceki soruya verdiğim yanıtı buldum.

Google Harita API'sı içeren bir Reveal Modal sahibiyim. Bir düğmeye tıklandığında Reveal Modal açılır ve Google Haritasını görüntüler. Sorunum, haritanın sadece üçte birinin görüntülenmesi. Bunun nedeni, yeniden boyutlandırma tetikleyicisinin uygulanması gerektiğidir. Sorum şu: google.maps.event.trigger (harita, 'resize') uygulamasını nasıl uygularım? Bu küçük kod parçasını nereye yerleştiririm?

İşte test sitem. Eldeki problemi görmek için Google Map düğmesine tıklayın. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Ortaya Modeli komut:

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#myModal1').click(function() { 
    $('#myModal').reveal(); 
     }); 
      }); 
</script> 

My Google Harita Senaryo:

<script type="text/javascript"> 
function initialize() { 
var mapOptions = { 
center: new google.maps.LatLng(39.739318, -89.266507), 
zoom: 5, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
mapOptions); 
} 

</script> 

Google Haritası tutan div:

<div id="myModal" class="reveal-modal large"> 
    <h2>How to get here</h2> 
    <div id="map_canvas" style="width:600px; height:300px;"></div> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

Answer 1

burada Var kaybetmek kaynak kodu ile sorunların bir çift aslında vardı gerekir.

• initialize() fonksiyon oluşturulur, ancak asla denir
• bize (@Cristiano Fontes dediğim gibi)
• map global değişkeni olmalıdır yüklenen jQuery sonra çağrılmalıdır $(document).ready ve bir var map
• (Önemli) click olayı hiç çağrılmıyor. Reveal from Zurb'un iki yöntemi birleştirmeye çalıştığınız bir diyaloğu açmanızı sağlar (biri JS, bir tanesi sadece HTML ile). Tek JS yöntemini kullanmanız gerekir.
• Yanlışlıkla ID kullanıyorsunuz (#myModal1 asla HTML'de bulunmuyor).

Ve şimdi: Download the solution (a indir/JSFiddle sefere bize, bu yüzden bu kendimizi oluşturmak gerekmez Lütfen).

Yardım edin!

Answer 2

Sadece burada

ekleyin

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#myModal1').click(function() { 
    $('#myModal').reveal(); 
    google.maps.event.trigger(map, 'resize'); 
     }); 
      }); 
</script> 

AMA sen genel değişken olarak haritayı koymak, bu yüzden

<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(39.739318, -89.266507), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
--> map = new google.maps.Map(document.getElementById("map_canvas"), 
    mapOptions); 
} 

</script> 

Answer 3

Son cevap için nasıl yorum yazıldığını bulamadınız ama Cristiano Fontes için +1 yardımcı oldu! İşe yaradı. Benim durumumda:

<script type="text/javascript">  

$('div.map-box').hide(); 
$('li.map').mouseover(function(){ 
    $('div.map-box').show(); 
    google.maps.event.trigger(map, 'resize'); 
}); 

</script> 

Answer 4

google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
       google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
        google.maps.event.trigger(map, 'resize'); 
       }); 
});