Googleマップのスタイルがうまく動作しない

Question

Googleマップでスタイルを作成するには、このtutorialをフォローしていますが、機能しません。

法線マップのように示され、この私のコード

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=MY_API" type="text/javascript"></script> 

if (GBrowserIsCompatible()) { 

    var mapOptions = { 
     // How zoomed in you want the map to start at (always required) 
     zoom: 11, 

     // The latitude and longitude to center the map (always required) 
     center: new google.maps.LatLng(40.6700, -73.9400), // New York 

     // How you would like to style the map. 
     // This is where you would paste any style found on Snazzy Maps. 
     styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] 
    }; 

    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
} 

Googleマップでは、しかし、私はこれを達成するためにmap.howにスタイルを作りたいですか？ 私はこの写真のような地図を表示して私のGoogleマップにしたい

ありがとう。

Answer 1

v2 APIはスタイル付きマップをサポートしていません。 v3 APIを使用するには、APIインクルードを変​​更して& v = 2を削除してください（その間に、documented includeに変更してください。APIキーを追加してください）。

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script> 
 
<div id="map"></div> 
 
<script> 
 
    var mapOptions = { 
 
    // How zoomed in you want the map to start at (always required) 
 
    zoom: 11, 
 

 
    // The latitude and longitude to center the map (always required) 
 
    center: new google.maps.LatLng(40.6700, -73.9400), // New York 
 

 
    // How you would like to style the map. 
 
    // This is where you would paste any style found on Snazzy Maps. 
 
    styles: [{ 
 
     "featureType": "water", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#e9e9e9" 
 
     }, { 
 
     "lightness": 17 
 
     }] 
 
    }, { 
 
     "featureType": "landscape", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#f5f5f5" 
 
     }, { 
 
     "lightness": 20 
 
     }] 
 
    }, { 
 
     "featureType": "road.highway", 
 
     "elementType": "geometry.fill", 
 
     "stylers": [{ 
 
     "color": "#ffffff" 
 
     }, { 
 
     "lightness": 17 
 
     }] 
 
    }, { 
 
     "featureType": "road.highway", 
 
     "elementType": "geometry.stroke", 
 
     "stylers": [{ 
 
     "color": "#ffffff" 
 
     }, { 
 
     "lightness": 29 
 
     }, { 
 
     "weight": 0.2 
 
     }] 
 
    }, { 
 
     "featureType": "road.arterial", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#ffffff" 
 
     }, { 
 
     "lightness": 18 
 
     }] 
 
    }, { 
 
     "featureType": "road.local", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#ffffff" 
 
     }, { 
 
     "lightness": 16 
 
     }] 
 
    }, { 
 
     "featureType": "poi", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#f5f5f5" 
 
     }, { 
 
     "lightness": 21 
 
     }] 
 
    }, { 
 
     "featureType": "poi.park", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#dedede" 
 
     }, { 
 
     "lightness": 21 
 
     }] 
 
    }, { 
 
     "elementType": "labels.text.stroke", 
 
     "stylers": [{ 
 
     "visibility": "on" 
 
     }, { 
 
     "color": "#ffffff" 
 
     }, { 
 
     "lightness": 16 
 
     }] 
 
    }, { 
 
     "elementType": "labels.text.fill", 
 
     "stylers": [{ 
 
     "saturation": 36 
 
     }, { 
 
     "color": "#333333" 
 
     }, { 
 
     "lightness": 40 
 
     }] 
 
    }, { 
 
     "elementType": "labels.icon", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }, { 
 
     "featureType": "transit", 
 
     "elementType": "geometry", 
 
     "stylers": [{ 
 
     "color": "#f2f2f2" 
 
     }, { 
 
     "lightness": 19 
 
     }] 
 
    }, { 
 
     "featureType": "administrative", 
 
     "elementType": "geometry.fill", 
 
     "stylers": [{ 
 
     "color": "#fefefe" 
 
     }, { 
 
     "lightness": 20 
 
     }] 
 
    }, { 
 
     "featureType": "administrative", 
 
     "elementType": "geometry.stroke", 
 
     "stylers": [{ 
 
     "color": "#fefefe" 
 
     }, { 
 
     "lightness": 17 
 
     }, { 
 
     "weight": 1.2 
 
     }] 
 
    }] 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
</script>