CODEWITHSUNDEEP
google-mapsiframe
William
William

Reputation:

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

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?

Upvotes: 30

Views: 26597

Answers (15)

neverever
neverever

Reputation: 79

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/

Upvotes: 0

Matt Goo
Matt Goo

Reputation: 1136

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?

Upvotes: 1

skyrail
skyrail

Reputation: 149

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();
  });
})

Upvotes: 0

Pablo S G Pacheco
Pablo S G Pacheco

Reputation: 2600

You can simply refresh the iframe like this:

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

Upvotes: 2

mponiek
mponiek

Reputation: 31

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');

});

});

Upvotes: 1

Core Consulting GmbH
Core Consulting GmbH

Reputation: 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);
});

Upvotes: -1

Richard Varno
Richard Varno

Reputation: 547

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)

Upvotes: 0

manosagent
manosagent

Reputation: 634

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");
  });

Upvotes: 0

Shahid Mir
Shahid Mir

Reputation: 11

<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>

Upvotes: 1

Akerz
Akerz

Reputation: 11

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>

Upvotes: 1

Justin Lucente
Justin Lucente

Reputation: 1161

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.

Upvotes: 7

felipelavinz
felipelavinz

Reputation: 549

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

Upvotes: 2

Carolina
Carolina

Reputation: 191

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!

Upvotes: 17

Forest
Forest

Reputation:

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.

Upvotes: 7

William
William

Reputation:

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.

Upvotes: 2

Related Questions