Search jQuery

jQuery Forum

Using jQuery

Damien O ..

Google Maps resize issue inside a hidden div

in Using jQuery • 8 years ago

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:

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:

// run the function below once the DOM(Document Object Model) is ready
jQuery(document).ready(function( $ ) {
// trigger the function when clicking on an assigned element
jQuery("#distribution .more").click(function () {
// check the visibility of the next element in the DOM
if (jQuery(this).next().is(":hidden")) {
jQuery(this).next().slideDown("slow");
jQuery("#distribution").addClass("distribution_expand"); // slide it down
var center = map.getCenter(); google.maps.event.trigger(map, 'resize'); map.setCenter(center);
} else {
jQuery(this).next().hide(); // hide it
jQuery("#distribution").removeClass("distribution_expand"); // slide it up
}
});
});

My HTML for that div is:

<div class="col-md-6" id="right">
<div class="col-md-12 col-sm-12" id="distribution">
<?php query_posts('p=1985'); ?>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile;?>
<div class="more"><span>More ></span></div>
<div class="distribution_display content" id="container"><?php the_content();?></div>
</div>

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:

<div class="item dark">
<div id="map_canvas" class="map"></div>
</div>
<div class="content1 light shadow panel">
<ul>
<li class="gmap" data-gmapping='{"id":"m_4","latlng":{"lat":53.3473374,"lng":-6.2603307},"tags":""}'>
<p class="info-box" style="color:black;">Abbey Court Hostel</p><small>29 Bachelors Walk, Dublin 1</small>
</li>
<li class="gmap" data-gmapping='{"id":"m_1","latlng":{"lat":53.3479993,"lng":-6.2625874},"tags":""}'>
<p class="info-box" style="color:black;">Abbey Hotel</p><small>Mid Abbey Street, Dublin 2</small>
</li>
<li class="gmap" data-gmapping='{"id":"m_4","latlng":{"lat":53.3464433,"lng":-6.2610087},"tags":""}'>
<p class="info-box" style="color:black;">Abigails Hostel</p><small>Aston Quay, Dublin 2</small>
</li>
</ul>
</div>