Menu
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>
376
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
108
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
