Q:

Google Maps API styling error

I'm trying to follow this tutorial about how to style a google map, but the styling is not working, showing just a gray square on the screen (the div I created).
Here is the code I'm using:
<!DOCTYPE html>
<html>
    <head>
        <style>
            #map_canvas {
                width: 500px;
                height: 500px;
                background-color: #CCC;
            }
        </style>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
            function initialize() {
                var styles = [
                  {
                    featureType: 'road',
                    elementType: 'geometry',
                    stylers: [
                      { color: '#000000' },
                      { weight: 1.6 }
                    ]
                  }, {
                    featureType: 'road',
                    elementType: 'labels',
                    stylers: [
                      { saturation: -100 },
                      { invert_lightness: true }
                    ]
                  }, {
                    featureType: 'landscape',
                    elementType: 'geometry',
                    stylers: [
                      { hue: '#ffff00' },
                      { gamma: 1.4 },
                      { saturation: 82 },
                      { lightness: 96 }
                    ]
                  }, {
                    featureType: 'poi.school',
                    elementType: 'geometry',
                    stylers: [
                      { hue: '#fff700' },
                      { lightness: -15 },
                      { saturation: 99 }
                    ]
                  }
                ];
                var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"});
                var map_canvas = document.getElementById('map_canvas');
                var map_options = {
                    center: new google.maps.LatLng(44.5403, -78.5463),
                    zoom: 8,
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                    }
                }
               var map = new google.maps.Map(map_canvas, map_options);
               map.mapTypes.set('map_style', styledMap);
               map.setMapTypeId('map_style');   
             }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map_canvas">

        </div>

    </body>
</html>

Can anyone help me?

A:

You need to use the JavaScript debugger. Have you used one before? Every browser has developer tools available these days. My favorite is the Chrome DevTools.
If you load your code with the DevTools open, you'll see it stop on the line with the error:
var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"});

Roll the mouse over the various names on that line. You'll see that google is defined, and google.maps is defined, but google.maps.styleMapType is undefined.
Compare that line with the tutorial or the documentation and you'll see that what you need is StyledMapType, not styleMapType.
Fix that and your map will work.
But please, don't just take this fix and run with it. Spend some time with the Developer Tools and get familiar with them. This will save you many hours of time in your future debugging.

