Google maps in hidden div

Asked 16/8, 2011 at 20:10 Answered 23/9, 2013 at 16:51

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. So I moved the initialize() function to the href of the map tab using onclick(). This works the first time you click on it but when you return to the photos tab and then go back to the map tab the map only partially draws. If you click the map tab a second time it works perfectly. Any ideas?

tabs javascript:

<script type="text/javascript">

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

</script>

google maps javascript:

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

   var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"<?=$fulladdress ?>"
  });   
}
</script>

html:

<div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">Photos</a></li>
            <li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li>
        </ul>


        <div id="first"> </div>
      <div id="map_canvas" ></div>

Slavery answered 16/8, 2011 at 20:10 Comment(0)

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

Alguire answered 16/8, 2011 at 20:18 Comment(5)

Thanks but that did not fix the problem. The map loads fine the first time I hit the maps tab but if I hit the photos tab and then go back to the maps tab then it only partially loads. – Slavery 16/8, 2011 at 20:38

@Slavery Hmm that's interesting, is the map definitely called "map" and when you resize it you have the map in scope? – Alguire 16/8, 2011 at 21:7

you can see it in action here: link – Slavery 17/8, 2011 at 15:8

Perhaps try inserting var map; on line 45 before the function initialize() { . Hopefully this is a scope issue, putting this should make it global – Alguire 17/8, 2011 at 21:10

@DougMolineux Thanks a lot, it saved a lot of my time :) – Predella 3/10, 2015 at 7:23

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.

Nereus answered 23/9, 2013 at 16:51 Comment(0)

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.

Jaconet answered 4/11, 2012 at 10:19 Comment(0)

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!

Ownership answered 29/6, 2012 at 14:1 Comment(0)

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);

Divulgence answered 30/8, 2013 at 0:15 Comment(0)

Recommended topics

Hot tags