Google Maps - STYLES not working

Howdy folks,

I have some code seen below I have used for years. Everything works fine - with the exception of the "var styles" section. The purpose of the "var styles" is to make the maps grayscale by removing the saturation of color from the map. However, this no longer appears to be working and my maps are the default color of Google maps.

I have attached an image showing the color I am trying to achieve. 

Any suggestions on how to get this working again?

Thank Zicky

  <script type="text/javascript"> 
  $(window).load()
        { var styles = [
            {"stylers": [{ "saturation": -100 }]}
        ]; }
    function initialize() { 
      var latitude    = <?php echo floatval(@$maprecord['latitude']); ?>; 
      var longitude   = <?php echo floatval(@$maprecord['longitude']); ?>; 
      var mapCanvasId = 'map_canvas';
      if (latitude) {
        var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP,
		    scrollwheel: false,
                    mapTypeControl: false,
                    streetViewControl: false,
		    styles: styles
					};
		//var mapOptions  = { mapTypeId: google.maps.MapTypeId.TERRAIN };
		//var mapOptions  = { mapTypeId: google.maps.MapTypeId.HYBRID };
        var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
        var latLng      = new google.maps.LatLng(latitude, longitude);
        var marker      = new google.maps.Marker({map: map, position: latLng });

        map.setCenter(latLng);
        map.setZoom(18);
      }
    }
  </script>