Google Map call does not work


So, I'm a little confused. I tried calling a google map with the api and tutorial provided here:

But I seem to be unable to get it to work correctly, and my map div always ends up being a grey box. Here's the html and js that I used. Please let me know if there is some sort of glaring error, or if I should be using another api...

<div id="map_canvas"></div>


<script src=""></script>
  function initialize() {
    var map_canvas = document.getElementById("map_canvas");
    var mapOptions = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    var map = new google.maps.Map(map_canvas);
  google.maps.event.addDomListener(window, "load", initialize);

my css is set to have the height and width be 300px and 500px respectively... if that matters to you personally.

I think your code doesn't use the options. I'm not sure that's THE problem, but that's A problem:


var map = new google.maps.Map(map_canvas, mapOptions);