Google Maps API v3 JavaScript & HTML

I just coded a Google Map API v3 and now I want to embed it in to my website. The Map will appear on 5+ pages, yet each page will have a different set of plots.

First thing is first, here is a link to the page that I want to eventually put the map: https://www.flatschicago.com/edgewater-chicago/apartments The map is going to go in the blank space on the right side of the page (marked with a shadow at the bottom of the white box).

Here is the code for the Google Map API v3 that I coded up. Where do I put this code in order for it to appear in the box from the above page? This code works perfectly in JSFiddle, but when I try to embed the code in to the TEXT box & Custom CSS, nothing shows; here is the page I placed the code to “test it out”: https://www.flatschicago.com/edgewater-map/

API Code:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
var edgewater = new google.maps.LatLng(41.987245, -87.661233);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  var featureOpts = [

{
stylers: [
        { hue: '#3b3d38' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
featureType: 'water',
     stylers: [
        { color: '#3b3d38' }
      ]
    },
     {
featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [
        { color: '#3b3d38' },
        { visibility: 'on' }
      ]
    },
             {
featureType: 'transit',
      stylers: [
        { saturation: '#FFFFFF' },
        { visibility: 'on' }
      ]
    },
                     {
featureType: 'transit.station.bus',
      stylers: [
        { saturation: '#FFFFFF' },
        { visibility: 'on' }
      ]
    },

  ];

  var mapOptions = {
    zoom: 13,
    center: edgewater,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

        var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(41.993340, -87.657301);
var marker1 = new google.maps.Marker({
        position:latlng1,
        map:map,
        icon: 'https://i41.tinypic.com/2yla5og.png'});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('<a href="https://www.flatschicago.com/edgewater-chicago-apartments/6134-kenmore/" target="_blank">No. 6134 Kenmore?</a>');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(41.986071, -87.658206);
var marker2 = new google.maps.Marker({
        position:latlng2,
        map:map,
        icon: 'https://i41.tinypic.com/2yla5og.png'});

google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('<a href="https://www.flatschicago.com/edgewater-chicago-apartments/5718-winthrop/" target="_blank">No. 5718 Winthrop?</a>');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);
        var latlng3 = new google.maps.LatLng(41.980422, -87.657521);
var marker3 = new google.maps.Marker({
        position:latlng3,
        map:map,
        icon: 'https://i41.tinypic.com/2yla5og.png'});

google.maps.event.addListener(marker3, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('<a href="https://www.flatschicago.com/edgewater-chicago-apartments/5411-winthrop/" target="_blank">No. 5411 Winthrop?</a>');//update the content for this marker
        infowindow.open(map, marker3);//"move" the info window to the clicked marker and open it
    }
);
        var latlng4 = new google.maps.LatLng(41.974950, -87.657366);
var marker4 = new google.maps.Marker({
        position:latlng4,
        map:map,
        icon: 'https://i41.tinypic.com/2yla5og.png'});

google.maps.event.addListener(marker4, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('<a href="https://www.flatschicago.com/edgewater-chicago-apartments/5051-kenmore/" target="_blank">No. 5051 Kenmore?</a>');//update the content for this marker
        infowindow.open(map, marker4);//"move" the info window to the clicked marker and open it
    }
);

}

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

    </script>
  <body onload='intialize()'>
    <div id="map-canvas"  style='width:310px; height:537px;'></div>
  </body>

CSS:

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

Any help would be greatly appreciated. I have gotten this close, so hopefully we can resolve this issue.

Thanks in advance.