animate absolute positioned google map

I have a google map that I do not want displayed unless a button is clicked. Since display:none causes problems with google maps, I am making the map absolute positioned, it's display block and setting it's left property to -10,000 in order to hide it that way. What I want to do is when the button is clicked (the div), I want the map to slide in from the left. Here's what I have so far. Not working.

html
<body style="height:100%;position:relative;margin:0 auto;padding:0">
    
    <div id="backButton" class="blue borderRad" style="" onclick="hideMap();">LIST</div>
    <div id="map_canvas" style=""></div>

Open in new window


css
#backButton {
    margin:0 auto;
    position:absolute;
    top:50px;
    left:-10000px;
    width:50px;
    margin-left:-25px;
    z-index:100;
    padding:3px;
    cursor:pointer;
    text-align:center;
    border:solid 1px #000;
}

map_canvas{
    position:absolute;
    top:20px;
    left:-10000px;
    bottom:10px;
    right:10000px
}

Open in new window


js
function showMap() {
    $('#map_canvas').animate({ right: '10000px' });
    $("#backButton").animate({ right: '10000px' });
    
/*$('#map_canvas').css({ left: 0, right: 0 });
    $("#backButton").css("display", "block");*/
}

function hideMap() {
    $('#map_canvas').animate({ left: '10000px' });
    $("#backButton").animate({ left: '10000px' });
    
/*$('#map_canvas').css({ left: 10000, right: 10000 });
    $("#backButton").css("display", "none");*/
}

Open in new window

LVL 9
BobHavertyComhAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
You would want to animate left to zero to show and left to -10000px to hide. And you can combine them into one animation.
function showMap() {
		$('#map_canvas,#backButton').animate({ left: '0' });
	}
	
	function hideMap() {
		$('#map_canvas, #backButton').animate({ left: '-10000px' });
	}

Open in new window

Also, your css for map_canvas is missing the "#".
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
Yes, thanks for the tip on #. I don't know how it worked at all without that.

Your suggestion works, but only for the button. Weird. Also, what does the numeric value represent, how far to move over, or the actual destination on the screen? I'm guessing it's the destination on the screen.
0
Tom BeckCommented:
Position Left: Numeric value representing the number of pixels between the left edge of the browser window and the left edge of the container.

Are you sure the map is being generated? A Google map needs a container with dimensions. Your map does not have dimensions. Set a width and height in the css for #map_canvas. Look at the DOM from the browser's developer tools (like Firebug for Firefox) to see if the map_canvas div is being filled in with markup for a map. It will be quite a bit of new markup. Doesn't matter if it's -10000 pixels off the screen. It will still show up in the DOM.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

BobHavertyComhAuthor Commented:
When I change the css to this (no left offset)

#map_canvas{
    position:absolute;
    top:20px;
    left:0px;
    bottom:10px;
    right:0px
}

The map shows up and takes up the whole height of the screen, whatever that height might be, because I'm using a handy little trick where if you set the bottom coordinate for the absolutely positioned div, it will stretch to accommodate it, which is what I want, a variable height map.

This only works because I set the body, which is the map's parent and then the html parent of the body to be both height 100%. So 100% should be inheriting down

I am seeing all the map info in my dev tools, so it's loading. I just don't know why it doesn't like to be animated. Should I wrap map_canvas in a div? I don't see where that would matter but you never know.
0
Tom BeckCommented:
Tried to reproduce the problem with a 100% width and height map. Seems to work.

http://jsfiddle.net/tommyBoy/h9zv5g6b/2/
0
BobHavertyComhAuthor Commented:
Thanks Tom, what you suggested works fine. and it always made sense to me but I don't know why it didn't work before and I had to resort to setting the bottom position to make it show, but 100% on the map works fine. It could be that I later set the body parent and the html parent to 100% height and until then neither of the map's parents had any height, so the map was being set to 100% of nothing. I don't know. Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.