Google Maps Not Loading Within Js Tab

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 mad

Solution 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
}
varmap = new google.maps.Map(document.getElementById('gmap'), mapOptions);

//add the code here, after the map variable has been instantiatedvar 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 resizemap.setCenter(myLatlng)
});
//end of new codevar marker = new google.maps.Marker({
   position: myLatlng,
   map: map,
   clickable : true
});

Solution 2:

It can be solved easily by re-initialize the Google Map on Tab click.

$('#kort').click(function(e) {
    initialize();
    resetMap(map);
});

This simple solution has found from here - How to Display Google Map Inside of a Hidden Div