Integrate a google map javascript API into blogger

问题

I'm pulling my hair with Blogger and Google Maps API.

This is what I've done :

In the Template editor I added in the customize->Advanced->Add your CSS :

#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }

Then in the Header of the template I added just before the </head>:

<script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyAXprv_TXEju4E-phldszJrt2VNbxfIMkU' type='text/javascript'> </script>

And Finally I tried to use the Right Bar widget HTML/Javascript and past in the HTML editor :

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -34.397, lng: 150.644},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

You can see the result here :

http://f4eor.blogspot.com

Nothing works but the entire code works well in a simple HTML page created by notepad on my computer.

Thanks for your Help.