Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 376
user547794 Avatar asked Dec 24 '10 21:12

user547794


2 Answers

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

like image 108
ifaour Avatar answered Nov 04 '22 10:11

ifaour


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;
like image 22
Jani Hartikainen Avatar answered Nov 04 '22 10:11

Jani Hartikainen