樣式的Google地圖未顯示

Question

使用https://mapbuildr.com/創建了新樣式的Google地圖-一切正常。 這是完整的代碼：

<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

由於您對Google API的調用設置為defer ，因此您的腳本中尚無法使用google對象。您可以嘗試將其更改為使用本機事件偵聽器，例如：

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

到那時候應該加載Google API。.這是一個對我有用的分叉小提琴： http : //jsfiddle.net/qdroz71e/