title: Google map showing gray areas when show / hidden
body: <p>I'm having this problem: I have two Google maps in one page, showing just one a time. One shows a user-selected preferred store. If the user wants to choose another one, a WebService provides the nearest ones, and with that info, I hide the first map (and some associated elements), create another map and show it.</p>
  
  <p>Here is the fiddle:</p>
  
  <p><a href="http://jsfiddle.net/Osoascam/ReSsM/2/" rel="nofollow noreferrer">http://jsfiddle.net/Osoascam/ReSsM/2/</a></p>
  
  <p>I have several questions:</p>
  
  <ol>
  <li><p>Calling the Google Maps API directly (not via google.load), is there a way to determine when the script has loaded completely so I don't run into the "google is not defined" error?</p></li>
  <li><p>Is it OK what I'm doing to have two maps? Passing references to <code>var currentMapId, searchMapId</code>? As I'm sending a reference, I thought it might work... It's working, but I think it's kind of stupid. I don't know if just having one reference is OK.</p></li>
  <li><p>Try to click the buttons fast over and over again, the map shifts and a large gray area appears. This is not a big deal on the fiddle, but it is on my application, as sometimes it stays that way forever, even if the user drags the map. This is actually my most important question, the other two are just about code organization and optimization. How can I fix it?</p></li>
  <li><p>Finally, I don't know if it's my impression, but it seems to load the maps extremely slowly when you drag it around.</p></li>
  </ol>
  
  <p><em>Note: Actually my second map never loads, but the application is so big, I'm still testing the reason. For some weird reason, the map starts loading whenever I resize the browser.</em></p>
  
  <p><img src="https://i.stack.imgur.com/NGKrR.gif" alt="Google Maps Error"></p>
  
  <p>Thanks in advance,</p>
  
  <p>Óscar</p>