javascript - 相同的 Google map 无法在新域中使用

Question

以下代码在一个域中运行良好，但在另一个域中则无法显示 map 。为什么会发生这种情况？

两个站点的内容完全相同，因为客户端正在迁移新地址。

在旧域中， map 工作正常。在新的中出现错误。

HTML

<div id="canvas">              
    <div id="map-canvas"></div>
</div>

Java脚本

    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <script>
    function initialize() {

    //-----------------------------Stiles --------------------------------:

    var styles = [ { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [ { "hue": 

    "#66ff00" }, { "saturation": 43 }, { "visibility": "on" }, { "lightness": -46 } ] },{ 

    "featureType": "landscape.natural", "stylers": [ { "visibility": "on" }, { "hue": "#3bff00" }, 

    { "lightness": -53 }, { "saturation": 33 } ] },{ "featureType": "landscape.natural.terrain", 

    "stylers": [ { "visibility": "off" } ] },{ "featureType": "water", "stylers": [ { "lightness": 

    -61 }, { "saturation": -60 }, { "hue": "#1aff00" } ] },{ "featureType": "road.highway", 

    "elementType": "geometry.fill", "stylers": [ { "visibility": "on" }, { "hue": "#4cff00" }, { 

    "lightness": -69 } ] },{ "featureType": "road.highway", "elementType": "geometry.stroke", 

    "stylers": [ { "visibility": "off" } ] },{ "featureType": "road.arterial", "elementType": 

    "geometry.fill", "stylers": [ { "visibility": "on" }, { "saturation": 57 }, { "hue": "#22ff00" 

    }, { "lightness": -68 } ] },{ "featureType": "road.arterial", "elementType": "geometry.stroke", 

    "stylers": [ { "visibility": "off" } ] },{ "featureType": "road.local", "elementType": 

    "geometry.fill", "stylers": [ { "hue": "#55ff00" }, { "lightness": -64 }, { "saturation": 58 } 

    ] },{ "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [ { 

    "visibility": "off" } ] },{ "featureType": "road", "elementType": "labels.text.fill", 

    "stylers": [ { "color": "#ffffff" }, { "visibility": "on" } ] },{ "featureType": "road", 

    "elementType": "labels.text.stroke", "stylers": [ { "visibility": "off" } ] },{ "featureType": 

    "road", "elementType": "labels.icon", "stylers": [ { "visibility": "on" }, { "hue": "#6eff00" 

    }, { "lightness": -2 }, { "saturation": -42 } ] },{ "featureType": "poi", "elementType": 

    "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#8080ff" }, { "hue": 

    "#66ff00" }, { "saturation": -30 }, { "lightness": -45 } ] },{ "featureType": "poi", 

    "elementType": "labels.text.stroke", "stylers": [ { "color": "#808080" }, { "visibility": "off" 

    } ] },{ "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "visibility": 

    "on" }, { "color": "#ffffff" } ] },{ "featureType": "administrative", "elementType": 

    "labels.text.fill", "stylers": [ { "color": "#ffffff" }, { "visibility": "on" } ] },{ 

    "featureType": "administrative", "elementType": "labels.text.stroke", "stylers": [ { 

    "visibility": "on" }, { "hue": "#66ff00" }, { "saturation": 31 }, { "lightness": -76 } ] },{ 

    "featureType": "water", "elementType": "labels.text", "stylers": [ { "color": "#ffffff" }, { 

    "visibility": "on" } ] },{ "featureType": "water", "elementType": "labels.text.stroke", 

    "stylers": [ { "color": "#2a6028" } ] },{ "featureType": "transit.line", "elementType": 

    "geometry.fill", "stylers": [ { "visibility": "on" }, { "color": "#97f845" } ] },{ 

    "featureType": "transit.station", "elementType": "labels.text.fill", "stylers": [ { "color": 

    "#ffffff" } ] },{ "featureType": "transit.station", "elementType": "labels.text.stroke", 

    "stylers": [ { "visibility": "off" } ] } ]


    //-----------------------------------------------------------------------:

      var mapOptions = {
        zoom: 15,
        styles: styles,
        center: new google.maps.LatLng(40.115, -8.251),
        scrollwheel: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);


    //----------------------------- Marker --------------------------------:

      var image = 'images/logo-map-10.png';
      var myLatLng = new google.maps.LatLng(40.11218, -8.25144);
      var tipografiaMarker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
          animation: google.maps.Animation.BOUNCE,
      });
    }


    //-----------------------------------------------------------------------:

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

    <script>

Answer 1

js:35 Google map API 错误:MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

自去年夏天以来，您必须使用 API key 并将其限制在特定域中。