Reserving space for map on page load

Is it possible to reserve the space for the google maps when the page loads instead of moving everything as the maps load.
Apart from displaying a little nicer, I have links to anchors on the page that show in the wrong place as the page moves after directing the user to the anchor.

  • Brashell

    I don't quite understand what your asking. Are you saying that the maps move as the page loads? Like they start at the top then go to the bottom? When I loaded your link that you provided they all loaded and dint move, they seemed to be in the proper spots... What browser are you using so I might be able to reproduce the issue your using. Please also specify the version number if you know it. Thanks - Brashell

  • artroom

    OK. I was using Firefox (23.0.1) but have also tested in Safari (6.0.5), Chrome (29.x) and Explorer (9.x)
    I thought all were doing it, however now Chrome seems to be ok now, but all others are still experiencing the problem.

    When the page loads, at first it looks like screenshot 1, then after about 2-3 seconds, the maps all load, and it looks like screenshot 2.
    If you are on any page (other than the contact page) and click one of the location links in the box at the bottom right of page, it will link to the anchor set in the image for that location (which sits above the address and map).
    However what appears to happen (in FF, Safari, IE), is it takes you to the page, and where the anchor is, but then loads the maps which moves the page content, but leaves you where you are, meaning you are now longer seeing the correct location.

    If you click the links at the bottom from the Contact page (when it is all loaded) they all take you correctly where you should go.

    hopefully this all makes sense


  • Vladislav


    The reason why this is happening is because the google maps resources are loaded later on, to shave some time off the page loading time. Also, Chrome is *way* more aggressive in caching then the other browsers, so this is probably why you're not experiencing the issue there anymore (your first time visitors will, though). Fortunately, the solution is relatively simple, with some CSS - this should add the DIVs their necessary height from the get-go:

    .agm_google_maps {
    	height: 270px;

    You can add this to the plugin's "Additional CSS" field option in the plugin settings.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.