Google Map V3 off center in hidden div
I have a google map inside a div that I need to be hidden by default
<div id="newpost" style="display:none;">
When the map is unhidden a part of it isn't rendering. I'm guessing I have to reload the map onSubmit. Anybody know how to do this?
Thanks!
Here's my code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#newcatchhide').live('click', function(event) {
jQuery('#newpost').toggle('show');
});
});
This is开发者_如何学编程 the map oad function on the body tag:
<body onload="load()" onunload="GUnload()">
Here is the div that is toggled, and the div that contains the map:
<div id="newpost" style="display:none;">
<div id="map" style="width: 500px; height: 300px"></div>
Something like this? http://jsbin.com/imuri5
The idea is to initialize the map after displaying the DIV.
EDIT:
Ok based on your update replace:
jQuery('#newcatchhide').live('click', function(event) {
jQuery('#newpost').toggle('show');
});
with:
var onLoad = true;
jQuery('#newcatchhide').live('click', function(event) {
jQuery('#newpost').toggle(function() {
if(onLoad) {
load();
onLoad = false;
}
});
});
And then remove onload="load()" from the body tag
I recently had this same issue myself and discovered the fix to be quite simple:
google.maps.event.trigger(map, 'resize');
Where map is your google map instance.
You can call this after you make your div visible.
If you use jQuery for the map, you can use
map = $('#map_canvas').gmap().map;
better:
gmap.redraw = function() {
gmOnLoad = true;
if(gmOnLoad) {
google.maps.event.trigger(gmap, "resize");
gmap.setCenter(gmlatlng);
gmOnLoad = false;
}
}
and in show click event:
$("#goo").click(function() {
if ($("#map_canvas").css("display") == "none") {
$("#YMapsID").toggle();
$("#map_canvas").toggle();
if (gmap != undefined) {
gmap.redraw();
}
}
});
加载中,请稍侯......
精彩评论