Google maps shows up grey in hidden div

问题

I have read the many threads on stack about this issue, but nothing will resolve my problem. I have the google map on a tab that is initially hidden when the page loads and would like some assistance please. Here is the full code:

<script type="text/javascript"> 
  function loadsinglemap(){
  var mymap = new MeOnTheMap({
  container: "map_sidebar2",
  html: "<?php echo str_replace('"',"",$post->post_title); ?>",
  address: "<?php echo str_replace('"','',get_post_meta($post->ID, "map_location", true)); ?>",
  zoomLevel: 15,

  });                        
  } 

 jQuery(document).ready(function() {   loadsinglemap();  })

 </script>

This is on the page where the map is displayed:

<script type="text/javascript">
$(document).ready(function(){
$('a.contact').click(function(){
google.maps.event.trigger(mymap, 'resize');
});
});
</script>

I just cannot get it to work. If anyone sees something that would help please respond. Thanks

EDIT: Changed the element selector to a class, and my link to a class instead of an ID and it now at least picks it up. I get an error in firebug that "mymap is not defined".

回答1:

call the initilize() function once again after you unhide the div. i did it and it worked. JSFiddle

回答2:

I found instead of hiding the div set it's height / width to 0px; and set its overflow to hidden.

Helped me hope it helps you :)

回答3:

Check Roosko's answer here https://groups.google.com/forum/#!topic/google-maps-js-api-v3/aUrVnx-i7LI , it works for me!

Since the map loads before the modal gets a defined size, it renders size as zero.

<a href="#?w=500" rel="popup2" class="poplight" onClick="initialize()">
    <img src='images/location1.png' title='Location' alt='images/location2.png' />
</a>

I called the initilize() function when the pop up is clicked.

来源：https://stackoverflow.com/questions/13484651/google-maps-shows-up-grey-in-hidden-div

标签

google-maps

google-maps-api-3