1

Googleマップのスタイルを設定する方法についてこのチュートリアルに従おうとしていますが、スタイルが機能せず、画面に灰色の四角だけが表示されます(作成したdiv)。私が使用しているコードは次のとおりです。

<!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>

誰でも私を助けることができますか？

4

1 に答える 1

3

JavaScript デバッガーを使用する必要があります。以前に使用したことがありますか？最近では、どのブラウザにも開発者ツールが用意されています。私のお気に入りはChrome DevToolsです。

DevTools を開いた状態でコードを読み込むと、エラーのある行で停止することがわかります。

var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"});

その行のさまざまな名前の上にマウスを移動します。googleが定義されていることがわかりますが、google.maps定義されていますgoogle.maps.styleMapTypeが、 undefined.

StyledMapTypeその行をチュートリアルまたはドキュメントと比較すると、必要なものはではなくであることがわかりますstyleMapType。

それを修正すると、マップが機能します。

ただし、この修正プログラムをそのまま実行しないでください。開発者ツールに時間を費やして、それらに慣れてください。これにより、将来のデバッグで何時間も節約できます。

于 2013-04-27T20:44:26.393 に答える