javascript - Google maps not loading within js tab

Question

I am trying to make tabs using js to have more data on the site.

Please view: http://dev.ateo.dk/officelab-konferencecenter/

The two tabs at the top ("Billeder" and "kort") are made using js.

If i go into the tap called "kort", the google maps will not load completely - however if i right-click and choose "Inspect Element (Q)" using firefox, the map suddenly loads.

Also, the map is not centered. on the specific location - the location is in the top left corner.

You may notice a blank square below the tab div. This is the exact same code as used within the js tab. If i comment out the in js tab, the square which is blank, will work perfectly. So it somehow seems that the js tab combined with the js google maps are not working. Can this be the case, and if so, how is it fixed?

Below i am showing the code which will init the google maps and the taps on the page:

if($('body.single-konferencested').length > 0)
   {
       tabs();
   }

   if($('body.single-konferencested').length > 0)
   {
      $(document).ready(function() {
         function initialize() {
            var myLatlng = new google.maps.LatLng(place_lat,place_lng);
            var mapOptions = {
               zoom: 9,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

            var marker = new google.maps.Marker({
               position: myLatlng,
               map: map,
               clickable : true
            });

            var pinIcon = new google.maps.MarkerImage(
               "http://dev.ateo.dk/wp-content/themes/ateo/img/pin_marker.png",
               null, /* size is determined at runtime */
               null, /* origin is 0,0 */
               null, /* anchor is bottom center of the scaled image */
               new google.maps.Size(24, 40)
            ); 
            marker.setIcon(pinIcon);

            var content_string = '<div id="gmap_info">'+
                                    '<div id="siteNotice">'+
                                    '</div>'+
                                    '<h3 id="firstHeading" class="firstHeading">'+place_title+'</h3>'+
                                    '<div id="bodyContent">'+
                                    '<p>'+place_address+'<br />'+place_city_zip+'</div>'+
                                 '</div>';

            var infowindow = new google.maps.InfoWindow({
               content: content_string
            });

            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map, marker);
            });
         }

         google.maps.event.addDomListener(window, 'load', initialize);

      });
   }

This following is the html showing the DOM for the "Kort" tab:

<div class="tabContent" id="kort" style="padding: 5px 10px;">

    <h2>Kort</h2>
    <div id="gmap" style="width: 600px; height: 400px;"></div>
    <h2>test</h2>
  </div>

Best regards Patrick

Answer 1

If the div in which the map is going to live is not visible on page load the map will not load correctly. You should fire a resize once the div has come into view.

google.maps.event.trigger(map, 'resize');

You should bind this to the first click of the map tab.

It looks like the map is commented out of the second tab currently. If you could uncomment it it would be easier to help you more specifically!

EDIT: to bind the function once, try this:

var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
  google.maps.event.trigger(map, 'resize');
});

In order for the resize to work you will need access to the map variable from your init function. It would also be easier to select the correct tab if you drop a class on it. That would be more reliable then getting the 2nd li in the tabs ul.

EDIT 2: try adding the click function in your initialize code. Something similar to the following

var mapOptions = {
   zoom: 9,
   center: myLatlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('gmap'), mapOptions);

//add the code here, after the map variable has been instantiated
var tab = jQuery('ul#tabs li')[1]
jQuery(tab).one('click', function(){
  google.maps.event.trigger(map, 'resize');
  //fire a center event after the resize, this is also useful
  // if bound to a window resize
  map.setCenter(myLatlng)
});
//end of new code

var marker = new google.maps.Marker({
   position: myLatlng,
   map: map,
   clickable : true
});