google map style funktioniert nicht von snazzy

Question

ich folge diesem tutorial um stil in meine google map, aber es funktioniert nicht.

dies mein Code

<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 Maps wie normale Karte angezeigt, aber ich möchte Stil in map.how machen dies zu erreichen? Ich möchte meine Google Maps zeigen Karte wie dieses Bild

danke.

Answer 1

Die API v2 unterstützt keine formatierten Maps. Um die v3-API zu verwenden, ändern Sie das API-Include, um das & v = 2 zu entfernen (und ändern Sie es dabei in documented include, achten Sie darauf, Ihren API-Schlüssel hinzuzufügen).

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>