Google Maps not centering because div is display:none on page load

Question

I have a web-page that contains a hidden <div> using display: none; and I have a button on the page, that when clicked will change the visibility of the <div>, and overlay it on top of everything else (because it has a z-index set).

Within this <div>, 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.

The problem

Because the Google Maps iFrame is loading on the page load and while the <div> is hidden, it means that when the <div> is shown the Google Map is not aligned properly (the pin and central location are now in the top left hand corner)

The solution I am looking for

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 onClick function I can set that will reload the iFrame so that the map is properly centered.

Things to know

This iframe has a Google Maps page as its src. i.e. a URL rather than a link to a file in my site.

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.

Would it work if I embedded the map in another HTML file, and then placed that HTML file as the frame source?

score 17 · Answer 1 · answered May 17 '11 at 19:20

I had this similar issue and solved it by changing the css style of the div through jquery, and changing the place where I put the iframe of google map.

The problem

The jquery code:

<script type="text/javascript">    
$(function(){  
        $("#map_link").click(function(event) {  
            event.preventDefault();  
            $("#map").slideToggle();
        });  
    });
</script>

The HTML: I had the link and the google map iframe loaded inline into a div with a display:none css style. Because a display:none style makes the div width:0 and height:0, the address requested in google map doesn't display properly.

<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>

The solution

The jquery code

<script type="text/javascript"> 
$(function() {
    $("#map_link").click(function(event) {  
        event.preventDefault();
        $("#map").slideToggle(); 
        $("#map").html('google_map_iframe_here').css('display','block');
        });  
});
</script>

The HTML: The div where I used to put the map now is empty, because I load the map only when clicking on the link, and at that moment I change the css style from display:none to display:block, so the map shows well.

<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>

Hope this helps! Have a good coding day!

The embedded google maps didn't work for me either in combination with `display:none` on its parent. Loading the google maps iframe in a div with JS/jquery when parent becomes visible worked for me. Thanks. — Paul van den Dool, Apr 18 '14 at 12:19
can you show example with the actual iframe code. say i have multiple iframes iof google maps showing a place in a hidden div. — shorif2000, Nov 27 '14 at 13:29

score 7 · Answer 2 · answered Apr 28 '11 at 00:03

7

I'm no pro, but I removed the onload="initialize()" from the body tag and changed it to onclick="initialize()" in the button that unhides the div. This seems to work now.

answered Apr 28 '11 at 00:03

what body tag? I see no body tag on the OP - care to clarify? thanks. – MEM Apr 30 '14 at 12:09
Worked for me. Nice and simple +1 – Talk nerdy to me May 12 '14 at 21:09

score 7 · Answer 3 · answered Feb 13 '12 at 16:40

I'm not using an iframe (I'm using version 3 of the Google Maps API), but just had the same "not aligned properly" issue due to a 'hidden' div. My fix, instead of using display: none, which removed it from the DOM entirely, I used visibility, and height like so:

.myMapDiv {
    visibility: hidden;
    height: 0px;
}

I believe what's happening is that because 'visibility: hidden' actually keeps the element in the DOM still, the map is able to render as intended. I've tested it out in FF/Chrome/IE 7-9 and seems to be working so far without issue.

score 2 · Answer 4 · answered Jul 15 '14 at 18:02

2

You can simply refresh the iframe like this:

var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');

answered Jul 15 '14 at 18:02

Pablo S G Pacheco

2,550
28
28

score 2 · Answer 5 · answered Mar 29 '11 at 11:42

After hours of searching on the Internet and getting no results I decided to try what I put in as my final side note on my question and it worked!

I simply made a second file called map.html and inside the code was literally:

<html>
<iframe> </iframe>   
</html>

with obviously the Google Maps source and then in my main page I had the src for the iframe linked to pages/map.html instead of the Google Map link.

score 2 · Answer 6 · answered Feb 01 '12 at 20:05

instead of hiding the div with display:none, use something like position: absolute; top: -9999px; left: -9999px

then, when you want to show the content for that div, set those properties to position: static; top: auto; left: auto or something like that

score 1 · Answer 7 · answered Apr 04 '12 at 23:28

I had the same problem, my solution was to set both the div & the iframe to 0px height and then have it changed to the desired height when toggled.

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var ifr = document.getElementById("iframe");
    var text = document.getElementById("displayText");
    if(ele.style.visibility == "visible") {
            ele.style.visibility = "hidden";
        ele.style.height = "0px";
        ifr.style.height = "0px";
        text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
    }
    else {
        ele.style.visibility = "visible";
        ele.style.height = "420px";
        ifr.style.height = "420px";
        text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
    }
} 
</script>

<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>


<div id="toggleText"  style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>

score 1 · Answer 8 · answered Apr 18 '12 at 07:53

<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
<a href="#mapa" onClick="showMap();">Show / Hide Map</a>
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>

score 1 · Answer 9 · answered Mar 28 '14 at 15:36

There is a solution using both css and jQuery. First you need a wrapper div without height which will include the iframe.

In this way the iframe will load normally without be visible at all. Next using jQuery you can display/hide the iframe.

HTML

<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>

<div id="map-wrapper" style="height:0; overflow:hidden;">
    <div id="gmap">
        <iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
    </div>
</div>

CSS

.hidden {
    display: none;
}

jQuery

$(document).ready(function() {

$('#map-show').on('click',function(){

    // Remove class hidden from map - Display map
    $('#gmap').removeClass('hidden');

    // Set height to map container div - ONLY one time needed
    $('#map-wrapper').css('height', 'auto');
});

$('#map-hide').on('click',function(){

    // Add class hidden to map - Hide map
    $('#gmap').addClass('hidden');

});

});

score 1 · Answer 10 · edited May 23 '17 at 12:01

I have been struggling with something like this as well. Where I initially add a class .hidden which is display: none;. But when I toggle .hidden, the map is not centered. I found that waiting until the map is fully loaded, using the idle event listener before adding the class .hidden solved all my display issues.

google.maps.event.addListenerOnce(map, 'idle', function(){ // do something only the first time the map is loaded $mapContainer.addClass('hidden'); });

reference: How can I check whether Google Maps is fully loaded?

score 0 · Answer 11 · edited Sep 05 '13 at 12:26

0

You could use visibility hidden and use jQuery to show and hide it.

$('click-button').click(function(){
    var visibility = $("hidden-div").css("visibility");

    if (visibility == "hidden")
      $("hidden-div").css("visibility","visible");
    else
      $("hidden-div").css("visibility","hidden");
  });

edited Sep 05 '13 at 12:26

DisplayName

3,093
5
35
42

answered Sep 05 '13 at 12:08

manosagent

614
8
18

score 0 · Answer 12 · answered Oct 05 '13 at 16:11

Here is a solution that does not require any programming at all!

When getting the embed code, click "customize and preview embedded map", and then just drag the map down and to the right so that the push pin is in the lower right corner and then grab the new embed code.

When the map centers in hidden mode, it will still come up correctly when expanded. (not perfect I know, but if all you really want is for the push pin to show on the map, totally works)

score 0 · Answer 13 · answered Oct 18 '14 at 12:08

Same issue, easy solution.

css hidden leave a space in html flow. I don't know if a css position outside the screen is well accepted on every device and get a block perfectly hidden. jquery is nice working with block width and height.

css:

#map    {overflow:hidden; float:left;}

html:

<a href="#" id="btn_show">show</a>
<a href="#" id="btn_hide">hide</a>
<div id="map">
  <iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>

javascript:

var w=sames as gmap width;
var h=sames as gmap height;

$(document).ready(function(){
  $("#map").width(0);
  $("#map").height(0);

  $("#btn_show").click(function(){
    $("#map").show();
    $("#map").width(w);
    $("#map").height(h);
  });
  $("#btn_hide").click(function(){
    $("#map").hide();
  });
})

score 0 · Answer 14 · answered Feb 24 '16 at 12:26

I encounted the same problem.

Solution

Using iframe as an external source works.

online demo

http://jsbin.com/nogomi/1

Make sure that iframe element's name attribute is the same as a element's target attribute

Inspired from https://developers.google.com/maps/documentation/javascript/

score -1 · Answer 15 · edited Feb 12 '14 at 15:57

-1

in CSS:

#googleMap { visibility: hidden; }

Original

beim Klick der die Karte öffnen soll jQuery:

EDIT

jQuery when you click to open the map:

$('#googleMap')
 .css('display','none')
 .css('visibility','visible')
 .fadeIn(500);
});

edited Feb 12 '14 at 15:57

Bandreid

2,727
28
47

answered Feb 12 '14 at 15:31

Core Consulting GmbH

1

You should always post your answers in English. This site will not accept answers in other languages. Please keep this in mind from now on. Thank you :) – Bandreid Feb 12 '14 at 15:57

Google Maps not centering because div is display:none on page load

The problem

The solution I am looking for

Things to know

15 Answers15

The problem

The solution

Solution

online demo