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?
 
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
 
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.