问题描述
我遇到了一个Google地图存在问题,我在div里面,当点击按钮时,它会弹出在屏幕上。 Google Map仅部分显示。我知道我需要我需要创建一个resize事件,但不知道如何,或者把它放在哪里。任何帮助将非常感激!请记住,我对JS有一点了解!
链接到测试网站:点击Google地图按钮以查看手中的问题:
我的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">×</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">×</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未完全显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!