Menu
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 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 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!
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.
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.
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.
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
You can simply refresh the iframe like this:
var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With