javascript - Stylized Google Maps Won't Show Up? -

i new forum , having issue stylized google maps. it's not showing should be.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=my_own_key&sensor=false"></script>  <script type="text/javascript">     function initialize() {          // create array of styles.         var stylearray = [             {                 "featuretype": "water",                 "stylers": [                   { "saturation": -100 },                   { "lightness": -32 }                 ]             },{                 "featuretype": "road",                 "stylers": [                   { "saturation": -100 }                 ]             },{                 "featuretype": "landscape.natural.landcover",                 "stylers": [                   { "saturation": -100 },                   { "lightness": 63 }                 ]             },{                 "featuretype": "poi",                 "stylers": [                   { "lightness": 4 },                   { "saturation": -100 }                 ]             }         ]          // create new styledmaptype object, passing array of styles,         // name displayed on map type control.         var styledmap = new google.maps.styledmaptype(styles,             {name: "styled map"});          // create map object, , include maptypeid add         // map type control.         var mapoptions = {             zoom: 17,             center: new google.maps.latlng(-34.397, 150.644),             maptypecontroloptions: {                 maptypeids: [google.maps.maptypeid.roadmap, 'map_style']             }         };          var map = new google.maps.map(document.getelementbyid('map'),             mapoptions);          //associate styled map maptypeid , set display.         map.maptypes.set('map_style', styledmap);         map.setmaptypeid('map_style');     } </script>   

while html below:

<div id="map" style="width: 100%; height: 500px"></div> 

hopefully gurus here can me this. alot.

you have 2 bugs here.

you're not calling initialize() anywhere, none of javascript code runs. add line @ end of script:

google.maps.event.adddomlistener( window, 'load', initialize ); 

after fix that, load page developer tools open , you'll see error styles undefined, since named array stylearray. change 1 or other match, , map load!