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><!--end #distribution-->
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>
I really hope someone can help with this as I am going insane trying to implement the fix!
Thank you!
Damien