google-maps - Google Maps API V3 マーカーが読み込まれない

Question

私がやっているウェブサイトのグーグルマップにマーカーを表示しようとしています。マーカー コードがないと、マップは正常に読み込まれ、(マーカーなしで) 正しい場所が表示されます。マーカー コードを追加すると、マップが読み込まれなくなります。明らかに単純なものが欠けていますが、Jquery にはあまり詳しくありません。

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(53.154662, -1.208357),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
var marker = new google.maps.Marker({
  position:(53.154662, -1.208357),
  map: map-canvas,
  title:"Hello World!"
});
  google.maps.event.addDomListener(window, 'load', initialize);

</script>

ご協力ありがとうございます。