谷歌地图api加载灰色地图而不是地图图像

Question

我在使用 google maps api 时遇到了这个奇怪的问题。

我正在尝试显示带有可点击引脚的地图，其中数据是从 api 加载的。一切似乎都正常：数据已加载，图钉出现，切换工作......但是地图只是灰色 - 没有加载地图图像。它的可拖动标记也是从谷歌加载的，但不是地图图像。

这可能是什么原因？

'use strict'

var $ = require('jquery'),
    gmaps = require('google-maps');

var mapsHero = function(el) {
    this.init(el);
};


// Publics
mapsHero.prototype.init = function(map) {
    var gmap;
    
    gmaps.load(function(google) {
        var InfoBox = require('google-maps-infobox');
        var mapCanvas = document.getElementById('maps-hero');
        var api = "URL TO API"
        var icon1 = '../../assets/icons/icon_map_pin_green.svg';
        var icon2 = '../../assets/icons/icon_map_pin_orange.svg';
        var icon3 = '../../assets/icons/icon_map_pin_red.svg';

        var marker, i, j, k, f, infobox, infoboxes = [], longitude, latitude;

        var mapStyles = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}];

        var mapOptions = {
            //zoom: parseInt(map.getAttribute('data-zoom')),
            zoom: 3,
            mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
            },
            mapTypeId: 'Styled',
            center: new google.maps.LatLng(54.73054, -46.51219),
            scrollwheel: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            scaleControl: false,
            overviewMapControl: false
        };
        
        var styledMapType = new google.maps.StyledMapType(mapStyles, { name: 'Styled' });
        var gmap = new google.maps.Map(mapCanvas, mapOptions);

        var getJson = $.getJSON(api, function(data) {
            var dir = data.localContacts;

            $.each(data.localContacts, function(i, localContact) {
                $.each(localContact.items, function(i, location) {
                    var icon = icon2;
                    var box = "maps-infobox-mfct";

                    if (location.isHeadquater) {
                        icon = icon1;
                        box = "maps-infobox";
                    }

                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(location.longitude, location.latitude),
                        map: gmap,
                        icon: icon
                    });

                    var boxContent = '<div class="' + box + '">' + '<h3 class="headline5">' + location.name + '</h3>' + '<p>' + location.city + '<br>' + location.street + '<br>' + location.phone + '</p>' + '</div>';

                    var infobox = new InfoBox({
                        content: boxContent,
                        pixelOffset: new google.maps.Size(-125, -25),
                        closeBoxMargin: "5px",
                        alignBottom: true
                    });

                    infoboxes.push(infobox);

                    google.maps.event.addListener(marker, 'click', function() {
                        $.each(infoboxes, function(i, e) {
                            e.close();
                        });

                        infobox.open(gmap, marker);
                    });
                });
            });
        });

    });
};

module.exports = mapsHero;

我怀疑地图设置无法达到 marker = new google.maps.Marker，即使它们是全球性的......

有什么想法吗？

Answer 1

您还必须为地图注册自定义 mapType。

将此行放在创建google.map.Map-instance 的行之后：

gmap.mapTypes.set('Styled', styledMapType);

但是，当您只希望地图以单一样式显示时，您不需要创建自定义 mapType，您可以将样式直接应用于默认 mapType(ROADMAP)。

跟随会有同样的结果：

function initialize() {
  var mapStyles = [{
    "featureType": "landscape",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 65
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "poi",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 51
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.highway",
    "stylers": [{
      "saturation": -100
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "road.arterial",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 30
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "road.local",
    "stylers": [{
      "saturation": -100
    }, {
      "lightness": 40
    }, {
      "visibility": "on"
    }]
  }, {
    "featureType": "transit",
    "stylers": [{
      "saturation": -100
    }, {
      "visibility": "simplified"
    }]
  }, {
    "featureType": "administrative.province",
    "stylers": [{
      "visibility": "on"
    }]
  }, {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [{
      "visibility": "on"
    }, {
      "lightness": -25
    }, {
      "saturation": -100
    }]
  }, {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{
      "hue": "#ffff00"
    }, {
      "lightness": -25
    }, {
      "saturation": -97
    }]
  }];

  var mapOptions = {
    disableDefaultUI: true,
    zoom: 3,
    styles: mapStyles,
    center: new google.maps.LatLng(54.73054, -46.51219),

  };

  var gmap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);



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

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3">
</script>
<div id="map-canvas"></div>