PDA

View Full Version : 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:



<!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>