Google Maps resize issue inside a hidden div

Google Maps resize issue inside a hidden div

Hi All,

I hope someone can help me with this.

I am not very experienced with jQuery and need help implementing a fix for the issue where if you place a Google Map into a hidden div it does not load fully and only shows in full after the browser window is resized.

I understand that the following has to be added to my code, but I just really dont know where or how:

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

I have tried adding it to my header file, to the jQuery file, to the HTML files but to no avail.

My hidden divs are using a Slide Up and Slide Down effect to display the content and the js code is:

  1. // run the function below once the DOM(Document Object Model) is ready 
  2. jQuery(document).ready(function( $ ) {
  3.     // trigger the function when clicking on an assigned element
  4.  jQuery("#distribution .more").click(function () {
  5.         // check the visibility of the next element in the DOM
  6.      if (jQuery(this).next().is(":hidden")) {
  7.        jQuery(this).next().slideDown("slow");
  8.        jQuery("#distribution").addClass("distribution_expand"); // slide it down
  9.        var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center);
  10.    } else {
  11.        jQuery(this).next().hide(); // hide it
  12.        jQuery("#distribution").removeClass("distribution_expand"); // slide it up
  13.      }
  14.  });
  15. });
My HTML for that div is:
  1. <div class="col-md-6" id="right">
  2. <div class="col-md-12 col-sm-12" id="distribution">
  3.     <?php query_posts('p=1985'); ?>
  4. <?php while (have_posts()) : the_post(); ?>
  5. <h2><?php the_title(); ?></h2>
  6. <?php the_excerpt(); ?>
  7. <?php endwhile;?>
  8. <div class="more"><span>More &gt;</span></div>
  9. <div class="distribution_display content" id="container"><?php the_content();?></div>
  10. </div><!--end #distribution-->

The jQuery used is for the jquery.ui.map.js from  http://code.google.com/p/jquery-ui-map/ .

My code to display the map and multiple coordinates is:

  1. <div class="item dark">

  3. <div id="map_canvas" class="map"></div>

  5. </div>

  7. <div class="content1 light shadow panel">

  9. <ul>

  11.       <li class="gmap" data-gmapping='{"id":"m_4","latlng":{"lat":53.3473374,"lng":-6.2603307},"tags":""}'>

  13.       <p class="info-box" style="color:black;">Abbey Court Hostel</p><small>29 Bachelors Walk, Dublin 1</small>

  15. </li>
  17.       <li class="gmap" data-gmapping='{"id":"m_1","latlng":{"lat":53.3479993,"lng":-6.2625874},"tags":""}'>

  19. <p class="info-box" style="color:black;">Abbey Hotel</p><small>Mid Abbey Street, Dublin 2</small>

  21. </li>
  23. <li class="gmap" data-gmapping='{"id":"m_4","latlng":{"lat":53.3464433,"lng":-6.2610087},"tags":""}'>

  25. <p class="info-box" style="color:black;">Abigails Hostel</p><small>Aston Quay, Dublin 2</small>

  27. </li>
  28.       </ul>
  29. </div>

I really hope someone can help with this as I am going insane trying to implement the fix!

Thank you!

Damien