CODEWITHSUNDEEP
jquerygoogle-mapshtmlshow-hide
user3476598
user3476598

Reputation: 1

Show-hide div with google map in it - (hidden to start with)

thanks in advance if you can help.

I'm trying to simply hide and show a div by clicking a 'show map' link (which would then change to 'hide map) and would ideally like the div to animate using the slide up / down effect) It simply contains a google map embedded as an iframe using google's basic 'share map' option.

Of course, I'm running into the difficulty that has been discussed here several times in that the map just won't draw properly because the div is initially hidden.

I understand that, but as a useless coder that can only really copy and paste stuff, can't work out how to implement the various fixes that have been proposed here.

I get the sense that if I start with the div hidden, it's just not going to work - I kind of want this:

http://jsfiddle.net/ cancerian73/ T7jLf/20/

but with the div hidden to START with.

I've been reading here about a positioning 10000 px to left fix, but have no idea how to bring the div back into the normal page flow - then reverse it to hide again!

Could anyone help out here with an example I could understand? or am I just asking for something too basic?

It would be great if I could see all the code involved, so that I could effectively just copy/paste it!

many thanks in advance....

Upvotes: 0

Views: 1235

Answers (1)

jimbo.io
jimbo.io

Reputation: 174

If you give the map a container with overflow hidden and position the iframe in it absolutely out of site, it can render behind the scenes and you can use css transitions to show it.

See my plunker for reference, http://plnkr.co/edit/HcOLBwka1KbO1M8Aa9tR?p=preview

.map {
  width: 425px;
  height: 350px;
  overflow: hidden;
  position: relative;
}

.map iframe {
  position: absolute;
  top: -350px;
  transition: top 1s ease;
  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
}

.map.expanded iframe {
  top: 0px;
}

Then just use jquery to toggle the class on the container:

$(document).ready(function() {
  $('.btn-open-map').click(function() {
    $('.map').toggleClass('expanded');
  });
});

Upvotes: 1

Related Questions