title: Google Maps not centering because div is display:none on page load
body: <p>I have a web-page that contains a hidden <code>&lt;div&gt;</code> using <code>display: none;</code> and I have a button on the page, that when clicked will change the visibility of the <code>&lt;div&gt;</code>, and overlay it on top of everything else (because it has a z-index set).</p>
  <p>Within this <code>&lt;div&gt;</code>, I have a Google Map embedded using an iFrame with the Google Map pin dropped on the location I am trying to show to my users.</p>
  <h3>The problem</h3>
  <p>Because the Google Maps iFrame is loading on the page load and while the <code>&lt;div&gt;</code> is hidden, it means that when the <code>&lt;div&gt;</code> is shown the Google Map is not aligned properly (the pin and central location are now in the top left hand corner)</p>
  <h3>The solution I am looking for</h3>
  <p>I know that some people are probably going to tell me ways in which I &quot;should&quot; recode my entire page. What I am actually looking for is some sort of <code>onClick</code> function I can set that will reload the iFrame so that the map is properly centered.</p>
  <h3>Things to know</h3>
  <p>This iframe has a Google Maps page as its src. i.e. a URL rather than a link to a file in my site.</p>
  <p>Any help would be greatly appreciated! A lot of code I have looked at searching the net seems to work at refreshing a specific file that is referenced rather than an external URL.</p>
  <p>Would it work if I embedded the map in another HTML file, and then placed that HTML file as the frame source?</p>