JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Test Map</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    </head>
    <body>
        <div id="map_canvas"></div>
    </body>
</html>

JavaScript

function doInit() {
    var lat = 37.763154;
    var lon = -122.457941;
    var initialZoom = 17;
    var mapTypeId = 'Custom Map';
    var mapStyle = [{
        featureType: "landscape",
        elementType: "all",
        stylers: [{
            hue: "#dae6c3"},
        {
            saturation: 16},
        {
            lightness: -7}]},
    {
        featureType: "road",
        elementType: "geometry",
        stylers: [{
            hue: "#ffffff"},
        {
            saturation: -100},
        {
            lightness: 100}]}];

    //**The error is tripped in this next line, again only in IE9 compatibility mode or IE**     
    var styledMap = new google.maps.StyledMapType(mapStyle);

    var mapType = new google.maps.ImageMapType({
        tileSize: new google.maps.Size(256, 256),
        getTileUrl: function(coord, zoom) {
            return "img/tiles/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
        }
    });
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(lat, lon),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: initialZoom,
        mapTypeControl: false
    });
    map.overlayMapTypes.insertAt(0, mapType);

    map.mapTypes.set(mapTypeId, styledMap);
    map.setMapTypeId(mapTypeId);
}

doInit();