title: Google Maps Display:None Problem
body: <p>I'm trying to set up a Google map that will display when a link is clicked and then hide when another link is clicked. Everything works fine, except when I show the map from display:none, it doesn't display properly.</p>
  
  <p>I read about using google.maps.event.trigger(map, 'resize'); but I'm not proficient enough with Javascript and JQuery to know how to add it in.</p>
  
  <p>Here's the code I've been using:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;style type="text/css"&gt;
              #viewmap {
                  position:relative;
                  width:944px;
                  float:left;
                  display:none;
              }
              #hidemap {
                  position:relative;
                  width:944px;
                  float:left;
                  display:block;
              }
              #map_canvas {
                  position:relative;
                  float:left;
                  width:944px;
                  height:300px;
              }
          &lt;/style&gt;
          &lt;script type="text/javascript"
              src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"&gt;
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function initialize() {
                  var latlng = new google.maps.LatLng(-27.999673,153.42855);
                  var myOptions = {
                      zoom: 15,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      mapTypeControl: true,
                      mapTypeControlOptions: {
                          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                      }
                  };
  
                  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  
                  var contentString = 'blah';
  
                  var infowindow = new google.maps.InfoWindow({
                      content: contentString
                  });
  
                  var marker = new google.maps.Marker({
                      position: latlng, 
                      map: map
                  });
  
                  google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map,marker);
                  });
              }
  
              google.maps.event.addDomListener(window, 'load', initialize);
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function toggleDiv1(viewmap){
                  if(document.getElementById(viewmap).style.display == 'block'){
                      document.getElementById(viewmap).style.display = 'none';
                  }else{
                      document.getElementById(viewmap).style.display = 'block';
                  }
              }
              function toggleDiv2(hidemap){
                  if(document.getElementById(hidemap).style.display == 'none'){
                      document.getElementById(hidemap).style.display = 'block';
                  }else{
                      document.getElementById(hidemap).style.display = 'none';
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="viewmap"&gt;
              &lt;a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');"&gt;Hide map&lt;/a&gt;
              &lt;div id="map_canvas"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="hidemap"&gt;
              &lt;a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');"&gt;View map&lt;/a&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be much appreciated,</p>
  
  <p>Quintin</p>