Sliding a Google map on to the page

**chadlexmorgan** · 08-20-2013, 11:56 PM

If you don't know it by now here is the link: http://www.rezzurrectiontaxidermy.com

Trying to add a google map to the site but have it slide on to the page like the rest of the content does. I'm importing the map with Javascript and google API. I have highlighted all the areas that have to do with this. So here is the Code:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rezzurrection Taxedermy</title>
t<link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
<link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
<style type="text/css">
#fadeshow1 {
	position: absolute !important;
	bottom: 30px;
	left: 50%;
	margin-left: -500px;
}
#slideshowtoggler {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 100%;
}
#slideshowholder {
	position: fixed;
	bottom: -530px;
	left: 0;
	width: 100%;
}
#coninfo {
	position: absolute !important;
	bottom: 30px;
	left: 50%;
	margin-left: -500px;
}

#map_canvas {
	position: absolute;
	bottom:30;
	left: 60%;
	margin-left: -1000px;
	width: 500px;
	height: 500px;
}

#contactholder{
	position: fixed;
	bottom: -530px;
	left: 0;
	width: 100%;
}
 
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow:hidden;
} 

#filter{
	position: fixed;
}

</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>



<script>
	$(document).ready(function() {	
		$('.item4 a').click(function(){
			$('#contactholder').animate({bottom: 0}, 800); return false;
		});
		$('#menu li a').not('.item4 a').click(function(){
			$('#contactholder').animate({bottom: -530});
		});
		$('.item2 a').click(function(){
			$('#slideshowholder').animate({bottom: 0}, 800); return false;
		});
		$('#menu li a').not('.item2 a').click(function(){
			$('#slideshowholder').animate({bottom: -530});
		});
		$("#menu, #white_line, #logo").css("opacity","0");
		$("#menu").stop().animate({
				opacity: 0.9,
				marginLeft: '50px' 
		}, 2400, 'easeInSine');
		$("#white_line, #logo").stop().animate(
			{opacity: 0.7},
			{duration:2400,easing: 'easeInSine'
		})
	
		$('#menu span').mouseenter(function(element) {
			$("#menu ul li").css("opacity","1");
			$('#white_line').stop().animate(
				{top: 40, height:290},
				{duration:500,easing: 'easeOutBack'}
			)
			$("#menu ul li").eachDelay(function(){ 
				$(this).stop().animate({
				opacity: 1,
				marginLeft: '0px',
				backgroundPosition: "150px 0px"
				}, 600, 'easeOutBack');			
			}, 30);			
		});
		
		$('#menu').mouseleave(function(element) {
			$("#menu ul li").eachDelay(function(index){ 
				$(this).stop().animate({
				opacity: 0,
				marginLeft: '-200px',
				backgroundPosition: "150px 0px"
				}, 600, 'linear');	
				if(index == $("#menu ul li").size() -1){
					$('#white_line').stop().animate(
						{top: 79, height:1},
						{duration:600,easing: 'easeInBack'
					})
				}
			}, 30);
			
			
		});
		
		
		
		
		$('#menu ul li').mouseenter(function(element) {			
			$('#menu ul li').not(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '0.5' 
			}, 500, 'linear');
			$(this).stop().animate({
				backgroundPosition: "300px 0px",
				opacity: '1' 
			}, 600, 'easeOutBounce');	
			$(this).find('a').css("color","#916153");
		});
		
		$('#menu ul li').mouseleave(function(element) {			
			$(this).stop().animate({
				backgroundPosition: "150px 0px",
				opacity: '1' 
			}, 200, 'linear');	
			$(this).find('a').css("color","#000");
		});
		
	});
</script>

<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">
var $ = jQuery;
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["./Rez_Pics/Slide1.png"],
		["./Rez_Pics/Slide2.png"],
		["./Rez_Pics/Slide3.png"],
		["./Rez_Pics/Slide4.png"],
		["./Rez_Pics/Slide5.png"],
		["./Rez_Pics/Slide6.png"],
		["./Rez_Pics/Slide7.png"],
		["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: "slideshowtoggler"
})

</script>
<!--[if lt IE 9]>
<style type="text/css">
#bg {
	background-image: none !important;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
}
</style>
<![endif]-->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(38.461133, -90.651412),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, ‘load’, initialize);
    </script>
</head>
<body >

<div id="pagewrap">
		
	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
		

	<div id="content1">		
		<div id="filter"></div>		
		<div id="white_line"></div>
		<div id="menu">
			<span></span>
			<ul>
				<li class="item1"><a href="#">Gallery</a></li>
				<li class="item2"><a href="#">Field Care</a></li>
				<li class="item3"><a href="#">Braggin' Rights</a></li>
				<li class="item4"><a href="#">Contact</a></li>
				
			</ul>
			
		</div>
	</div>
		<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png"></a></div>
		<div id="FaceBook"><a href="https://www.facebook.com/RezzurrectionTaxidermy" rel="external"><img src="./Rez_Pics/camo-facebook-icon.png" /></a></div>
</div>

			<div id="slideshowholder">
				<div id="fadeshow1"></div>
					<div id="slideshowtoggler">
						<a href="#" class="prev">		
							<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
								<span class="status" style="margin:0 50px; font-weight:bold"></span> 
						<a href="#" class="next">
							<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
					</div>
			</div>
			<div id="contactholder">
				<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
				<div id="map_canvas"></div>
			</div>
						

			



</body>
</html>

Thread: Sliding a Google map on to the page

Thread Tools

Search Thread

Sliding a Google map on to the page

Similar Threads

sliding pop up at bottom right of page

Sliding content on to the page.

FACEBOOK FANPAGE upgrade: How did they add Sliding menu Banner on Welcome Page??

Resolved I'm looking for a sliding div and page content script

need help with a google ad on my page....

Bookmarks

Bookmarks

Posting Permissions