Как использовать google.maps.event.trigger(map, 'resize')

Я новичок в JS и нашел ответ на предыдущий вопрос, который вызвал новый вопрос, который привел меня сюда снова.

У меня есть Reveal Modal, который содержит API карт Google. Когда нажимается кнопка, появляется всплывающее окно Reveal Modal и отображается карта Google. Моя проблема в том, что отображается только одна треть карты. Это связано с тем, что триггер изменения размера должен быть реализован. Мой вопрос: как мне реализовать google.maps.event.trigger(map, 'resize')? Где я размещаю этот небольшой фрагмент кода?

Вот мой тестовый сайт. Нажмите кнопку "Карта Google", чтобы увидеть проблему. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Модель раскрытия script:

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

Моя карта Google script:

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

В div, который содержит карту Google:

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

Ответы

Ответ 1

На вашем исходном коде было несколько проблем.

Функция initialize() создана, но никогда не вызывается
$(document).ready следует вызывать после загрузки jQuery
map должна быть глобальной переменной (например, @Cristiano Fontes), а не var map
(Важно) Событие click никогда не вызывается. Вы пытаетесь объединить два метода Reveal from Zurb, чтобы открыть диалог (один с JS, один с только HTML). Вам нужно использовать единственный метод JS.
Вы используете неверный идентификатор (#myModal1 никогда не находится в HTML).

И теперь: Скачайте решение (пожалуйста, предоставьте нам загрузку /JSFiddle в следующий раз, поэтому нам не нужно создавать это сами).

Надеюсь, что это помогло!

Ответ 2

Просто добавьте его здесь

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

НО вам нужно поместить карту как глобальную переменную, поэтому потеряйте здесь var здесь

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

Ответ 3

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

Ответ 4

Не нашел, как оставить комментарий для последнего ответа, но +1 для Cristiano Fontes поможет! Это сработало. В моем случае:

<script type="text/javascript">    

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

</script>