Databases
StackOverflow2013
Postsdbo
POGoogle Maps not centering because div is display:none on page load
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps not centering because div is display:none on page load
    primarykey
    data
    text
    <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 "should" 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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKara
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle Maps not centering because div is display:none on page load
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGoogle Maps not centering because div is display:none on page load
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POGoogle Maps not centering because div is display:none on page load
      1. USDavid Weinraub
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload