Reveal Modal 内に Google Map API があります。それが何であるかを知らない人のために説明すると、これは基本的に、ボタンをクリックするとポップアップする非表示のコンテナーです。私はこの公開モーダル内に Google Map API を表示していますが、すべてのマップを表示しているわけではなく、おそらく 3 分の 1 しか表示していません。
マップ全体を表示するにはどうすればよいですか?
私のページへのリンク: http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#
Google マップ ボタンをクリックして手元の問題を確認してください
Reveal Modal スクリプト:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});
</script>
Google Map API を含む Div
<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">×</a>
</div>
クリックすると Google マップが表示されるボタン
<div class="five columns">
<ul class="button-group even three-up" id="contact-button-group">
<li><a href="#" class="button" data-reveal-id="myModal">Google Map</a></li>
<li><a href="#" class="button">Button 2</a></li>
<li><a href="#" class="button">Button 3</a></li>
</ul>
</div>