title: Google Maps not initialising properly
body: <p>I have been having an issue with Google Maps and trying to have it display properly after page load so it doesn't display half or even quarter of a map, but the full map.</p>
  
  <p>I have yet to be able to do this despite having a look around the internet and on a couple of questions on here.</p>
  
  <p>The question I have been looking at is here: <a href="https://stackoverflow.com/questions/18393628/google-map-api-doesnt-display-correctly-jquery-slidetoggle">Google map API doesn&#39;t display correctly jQuery slideToggle</a></p>
  
  <p>I have been having a look at the fiddle here: <a href="http://jsfiddle.net/fXsjb/8/" rel="nofollow noreferrer">http://jsfiddle.net/fXsjb/8/</a></p>
  
  <p>I have tried to replicate this on my own page and it seemed to be loading the map, but not toggling it with the slideToggle function.</p>
  
  <p>Also, my fiddle doesn't seem to be working either. You can find that here: <a href="http://jsfiddle.net/wilcochris/fXsjb/13/" rel="nofollow noreferrer">http://jsfiddle.net/wilcochris/fXsjb/13/</a></p>
  
  <p>I have been using the following code to try and get this to work:</p>
  
  <pre><code>$('.mapme').click(function()
  {
      var $this = $(this);
      $this.find('.mapit').slideToggle(500);
      $(this).text($(this).text() == 'Show Map' ? 'Hide Map' : 'Show Map');
  });
      function initialize()
      { 
          var latlng = new google.maps.LatLng(48.89376,2.33742);
          var settings = {
          zoom: 15,
          center: latlng,
          disableDefaultUI: true,
          zoomControl: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      var map = new google.maps.Map(document.getElementById("map"), settings);
      var marker=new google.maps.Marker({
            position:latlng,
            });
       marker.setMap(map);
  
          google.maps.event.addListenerOnce(map, 'idle', function()
          {
              $('.mapit').hide();
          });
      }
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>These are the divs that I have too</p>
  
  <pre><code>&lt;div class='mapme'&gt;Show Map&lt;/div&gt;
      &lt;div class="mapit"&gt;
      &lt;div id="map" style="width:300px;height:140px;"&gt;&lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Any pointers would be much appreciated. I have a feeling I am missing something obvious that it's just too obvious for me to figure out.</p>
  
  <p>Thanks in advance</p>