Стилированная карта google не отображается

Question

создала новую карту google с https://mapbuildr.com/ - все работает хорошо. вот полный код:

<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyB3bABW7kKWoZmbDMAjRsR1aFuW4m10bcg&sensor=false&extension=.js'></script> 

<script> 
google.maps.event.addDomListener(window, 'load', init); 
var map; 
function init() { 
    var mapOptions = { 
     center: new google.maps.LatLng(58.057506,26.494842), 
     zoom: 17, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.DEFAULT, 
     }, 
     disableDoubleClickZoom: true, 
     mapTypeControl: true, 
     mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     }, 
     scaleControl: true, 
     scrollwheel: true, 
     panControl: true, 
     streetViewControl: true, 
     draggable : true, 
     overviewMapControl: true, 
     overviewMapControlOptions: { 
      opened: false, 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: [ { "stylers": [ { "saturation": -100 }, { "gamma": 0.8 }, { "lightness": 4 }, { "visibility": "on" } ] },{ "featureType": "landscape.natural", "stylers": [ { "visibility": "on" }, { "color": "#5dff00" }, { "gamma": 4.97 }, { "lightness": -5 }, { "saturation": 100 } ] } ], 
    } 
    var mapElement = document.getElementById('google-map-styled'); 
    var map = new google.maps.Map(mapElement, mapOptions); 
    var locations = [ 
['Pühajärve Grill&Pub', 'undefined', 'undefined', 'undefined', 'undefined', 58.057104319954995, 26.494465303635366, 'https://mapbuildr.com/assets/img/markers/solid-pin-red.png'] 
    ]; 
    for (i = 0; i < locations.length; i++) { 
     if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];} 
     if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];} 
     if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];} 
     if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];} 
     if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];} 
     marker = new google.maps.Marker({ 
      icon: markericon, 
      position: new google.maps.LatLng(locations[i][5], locations[i][6]), 
      map: map, 
      title: locations[i][0], 
      desc: description, 
      tel: telephone, 
      email: email, 
      web: web 
     }); 
if (web.substring(0, 7) != "http://") { 
link = "http://" + web; 
} else { 
link = web; 
} 
     bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link); 
} 
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) { 
    var infoWindowVisible = (function() { 
      var currentlyVisible = false; 
      return function (visible) { 
       if (visible !== undefined) { 
        currentlyVisible = visible; 
       } 
       return currentlyVisible; 
      }; 
     }()); 
     iw = new google.maps.InfoWindow(); 
     google.maps.event.addListener(marker, 'click', function() { 
      if (infoWindowVisible()) { 
       iw.close(); 
       infoWindowVisible(false); 
      } else { 
       var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='mailto:"+email+"' >"+email+"<a><a href='"+link+"'' >"+web+"<a></div>"; 
       iw = new google.maps.InfoWindow({content:html}); 
       iw.open(map,marker); 
       infoWindowVisible(true); 
      } 
    }); 
    google.maps.event.addListener(iw, 'closeclick', function() { 
     infoWindowVisible(false); 
    }); 
} 
} 
</script> 
<style> 
    #google-map-styled { 
    height:700px; 
    width:950px; 
} 
.gm-style-iw * { 
    display: block; 
    width: 100%; 
} 
.gm-style-iw h4, .gm-style-iw p { 
    margin: 0; 
    padding: 0; 
} 
.gm-style-iw a { 
    color: #4272db; 
} 
</style> 

<div id='google-map-styled'></div> 

скопировал части кода http://jsfiddle.net/ не -Map показывая там. :(

, что я не хватает, то, что я сделал неправильно? Правильно ли использовать этот код в jsfiddle вообще?

Answer 1

Потому что ваш вызов API Google установлен в defer, то google объект выиграл» т иметь в сценарии еще .. Вы можете попробовать изменить его, чтобы использовать нативный слушателя событий, что-то вроде:

window.addEventListener('load', function() { 
    init(); 
}); 

к тому времени должно быть загружен API Google .. Вот раздвоенная скрипка от вашего, которые работает для меня: http://jsfiddle.net/qdroz71e/