Google Maps API on Squarespace

I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.

I've followed steps as below :

What I'm trying to archive is just to show a google map on my web.

Step 1: Insert a embed block for html

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

Step 2: insert javascript in page header

<script  type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>

<script type="text/javascript">
function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

Step 3 : in custom css section

#map_canvas 
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px
}

But the codes I put on Squarespace didn't work. How should I do? Here the link to my webpage on SquareSpace

Your Site Title

Thanks!!