Google Maps API - php

Question

So I've been working on including google maps in my webpage. I've already created it to work filling up 100% of the screen on its own html page. Now I wanna include the map to be smaller to fit in a in my web page. The include() functions work so on my web page I get the normal header and footer like expected. Only thing wrong is no map appears in the proper div I have set up for. Attatched is the javascript file that works and creates the map and the templated file that includes the header and footer and attempts to create the map.
//Create the function to initiaze the map
function initialize() {
//Map options must contain a center, an id, and a zoom
var mapOptions = {
center: new google.maps.LatLng(34.26, 27.19),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID,
//Don't want the user to be able to pan or zoom
disableDefaultUI:true
};
//Create a new instance of google maps inserting it into the id map-canvas and the map-options
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//Create a varaible to hold our coordinates for a marker
var trip1=new google.maps.LatLng(2.00,77.30);
var contentString='This is a sample window that can include clickable links to pictures and styled text for example';
var infowindow=new google.maps.InfoWindow({
content:contentString
});
//Create the google maps marker with the position as the the trip1 variable
var marker = new google.maps.Marker({
position: trip1,
title:'Ecuador',
map:map
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Now here's the php files for the website
<?php include('../includes/educateHeader.php');?>
<script type="text/javascript" charset="utf-8" src="map.js"></script>
<div class="bio">
<h1>About Us</h1>
</div>
<div id="map-canvas">
<h1>The Many Journeys of OEC</h1>
</div>
<?php include('../includes/educateFooter.php');?>
Also here's some of the css file in case, I wasn't sure
.bio{
color:white;
margin-top:20px;
margin-bottom:30px;
position:relative;
}
.bio h1{
text-align:center;
}
#map-canvas{
postion:relative;
margin-top:20px;
}
#map-canvas h1{
color:white;
text-align:center;
}
BODY{
margin-left:15%;
margin-right:15%;
background:url("umichBackground.jpg") no-repeat center center fixed;
margin-bottom:0%;
margin-top:0%;
background-size:cover;
-o-background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
height:100%;
}
HTML{
height:100%;
}

Answer 1

Something like..
#map-canvas {
width: 500px;
height: 500px;
}
?

Answer 2

You just need to put it inside of an element which has the height, width and location you desire. This line of JS below is what is actually putting the map inside a particular element on your page:
JS:
var map = new google.maps.Map(document.getElementById("myElement"), mapOptions);
HTML:
<div id="myElement"></div>
CSS:
#myElement {
width: 300px;
height: 300px;
}