显示模式中的Google Map API未完全显示 [英] Google Map API inside a Reveal Modal not showing fully

问题描述

我遇到了一个Google地图存在问题，我在div里面，当点击按钮时，它会弹出在屏幕上。 Google Map仅部分显示。我知道我需要我需要创建一个resize事件，但不知道如何，或者把它放在哪里。任何帮助将非常感激！请记住，我对JS有一点了解！

链接到测试网站：点击Google地图按钮以查看手中的问题：

http://simplicitdesignanddevelopment.com/Fannie ％20E％20Zurb / foundation / contact_us.html＃

我的Google API脚本：

 < script type =text / javascript> 
函数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：

 < div id =myModalclass =reveal-modal large> 
< h2>如何到达< / h2> 
< div id =map_canvasstyle =width：600px; height：300px;>< / div> 
< a class =close-reveal-modal>&＃215;< / a> 
< / div> 
  

按钮点击时调用地图的脚本：

 < script type =text / javascript> 
 $（document）.ready（function（）{
 $（'＃myModal1'）。click（function（）{
 $（'＃myModal'）。reveal（）; 
}）; 
}）; 
< / script> 
  

解决方案

b
$ b

 函数初始化（）{
 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）; 
返回地图; 
} 
 
< div id =myModalclass =reveal-modaldata-reveal> 
< div id =map_canvasstyle =height：300px>< / div> 
< a class =close-reveal-modal>&＃215;< / a> 
< / div> 
 
 $ b $（document）.ready（function（）{
 var myMap; 
 $（'＃myModal'）。bind（'open'，function（ ）{
 if（！myMap）{
 var myMap = initialize（）; 
 setTimeout（function（）{
 google.maps.event.trigger（myMap，'resize' ）; 
}，300）; 
} 
}）; 
} 
  

$ ORB

pre $ $（$ document $）
$（'＃myModal'）。bind（'opened'，function（）{
if（！myMap）{
var myMap = initialize（）;
google.maps .event.addDomListener（window，'load'，initialize）;
}
}）;
}）;

I am having problems with a Google Map that I have inside a div, which upon button click, pops up on screen. The Google Map is only partially showing. I know that I need to that I need to create a resize event, but do not know how, or where to put it. Any help would be much appreciated! Please keep in mind that I have little knowledge of JS!

Link to test site: CLICK ON GOOGLE MAP BUTTON TO SEE THE PROBLEM AT HAND:

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

My Google API 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> 

The div which contains the map:

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

The script which calls the map upon button click:

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

解决方案

Following Two solutions worked for me

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);
  return map;
}

<div id="myModal" class="reveal-modal" data-reveal>
  <div id="map_canvas" style="height: 300px"></div>
  <a class="close-reveal-modal">&#215;</a>
</div>


$(document).ready(function() {
  var myMap;
  $('#myModal').bind('open', function() {
    if(!myMap) {
      var myMap = initialize();
      setTimeout(function() {
        google.maps.event.trigger(myMap, 'resize');
      }, 300);                  
    }
  });
}

OR

$(document).ready(function() {
  var myMap;
  $('#myModal').bind('opened', function() {
    if(!myMap) {
      var myMap = initialize();
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  });
});

这篇关于显示模式中的Google Map API未完全显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！