Google maps in hidden div

后端未结

关注

 5  837

I have a page with two tabs. The first tab has photos and the second a google map. The problem is that the google map is not completely drawing because it is in a hidden div

相关标签:

5条回答

北海茫月

2020-12-06 07:18

By following the link provided from Pete, I was able to resolve that.

You probably have a function called calcRoute(). You might need to trigger this function twice. At first, when it's triggered it loads fine, but you might need to trigger that function again as well when you change the tab. That should work!

0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2020-12-06 07:19
I've seen this before you need to resize the map:
```
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
```
This is for V3:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

A little more info:

https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2020-12-06 07:19
After a day struggling with this, I followed the asker's link to his problem.

I saw this snippet some many times
```
google.maps.event.trigger(map, 'resize');
```
and I just couldn't find the right place to insert this piece of code. As a newbie in programming, I tried all places, which includes after the init, after calling the map, everywhere. Nothing worked.

Then I decided to follow a real situation, the person who actually asked this question. This is what he did, worked for him or her and it also worked for me. I did a minor change because it's always like that. His/her link is one of the comments.

My adobe DW doesn't give this option onclick, but... it works. You should try directly on the tag anchor where the div is hidden. It may be the proper place. Call the init and recenter at the body tag (or anchor tag). Once you click on the map, it will recenter the map.
```
<body  onclick="initialize(); center_map();">
```
After the
```
function initialize {
....

}
```
Have this one
```
<script type="text/javascript">
function center_map() {
var center = map.getCenter();
    document.getElementById("your_div_name").style.width = 'auto';
    document.getElementById("your_div_name").style.height = '250px';
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
}
</script>
```
Attention newbies from all over the world: change the name of div above. Put your real sizes. Some people say you need real numbers in the size. But any time you click any part of body, it runs the function. Try to be more specific on you onclick function. Hope this helps someones.
0 讨论(0)
发布评论:

提交评论
- 加载中...
青春惊慌失措

2020-12-06 07:22
This works for me:
```
google.maps.event.trigger(map, 'resize');
```
but, after the tab is shown...
```
$('a[href="#mytab"]').on('shown', function (e){
       google.maps.event.trigger(map, 'resize'); moveTo(); 
     });  // realocate the map
```
I am using bootstrap, find the similar function in jquery UI.
0 讨论(0)
发布评论:

提交评论
- 加载中...

天涯浪人

2020-12-06 07:26

I worked this out by binding the map resizing to the controller which unhides a section container. The important part here as it relates to needing to click twice to resize the map lies in the setTimeout bit. That will provide just enough of a delay to allow the width to be calculated on wrapper around the map.

/**
 * This example will work with foundation 4 sections. However, the idea is the same for any collapsed map. 
 * Load a map object
 * Find it's parent (which is hidden)
 * Bind a click event to the element which 'unhides' your container
 * */
(function($) {
  Drupal.behaviors.foundationCollapseHack =  {
      attach: function(context, settings) {
          // check whether we have a map
          if(typeof settings.vrListingMap != 'undefined') {
              // on page load
              $(window).load(function() {
                // grab a map object
                var map = Drupal.behaviors.vrwebListingMaps.map;
                // if we have a section container
                if($(map.b).parents('.section-container').length > 0) {
                    // find any maps in these tabs and bind a click to it
                    $(map.b).parents('section').find('p.title').children('a').click(function() {
                      // B.c of timing - it's important to wrap the resize stuff in a timeOut.
                      // This assures that getComputedStyle is not null when resize fires
                      setTimeout(function() {
                          var coord = map.getCenter();
                          google.maps.event.trigger(map, "resize");
                          map.setCenter(new google.maps.LatLng(coord.lat(), coord.lng()), settings.vrListingMap.options.default_zoom);    
                        }, 0 );
                    });
                  }
               });
           }
        }
    }

})(jQuery);

0 讨论(0)