谷歌地图不在帕格/翡翠工作

在这里输入图像描述

我必须在使用Pug / Jade开发的我的网站上实现谷歌地图。 帕格文件是使用Grunt编译的。 该脚本遵循ES6语法。

我也使用require.js

但没有获得谷歌地图。 我得到了如上图所示的屏幕。

我用下面的代码:

style. #map-canvas { height: 100%; margin: 0px; padding: 0px } #panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } script. var GoogleMapsAPI = require('googlemaps'); var publicConfig = { key: 'My Key', stagger_time: 1000, // for elevationPath encode_polylines: false, secure: false, // use https }; var gmAPI = new GoogleMapsAPI(publicConfig); var berlin = new google.maps.LatLng(52.520816, 13.410186); var neighborhoods = [ new google.maps.LatLng(52.511467, 13.447179), new google.maps.LatLng(52.549061, 13.422975), new google.maps.LatLng(52.497622, 13.396110), new google.maps.LatLng(52.517683, 13.394393) ]; var markers = []; var iterator = 0; var map; function initialize() { var mapOptions = { zoom: 12, center: berlin }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } function drop() { for (var i = 0; i < neighborhoods.length; i++) { setTimeout(function() { addMarker(); }, i * 200); } } function addMarker() { markers.push(new google.maps.Marker({ position: neighborhoods[iterator], map: map, draggable: false, animation: google.maps.Animation.DROP })); iterator++; } google.maps.event.addDomListener(window, 'load', initialize); body #panel(style="margin-left: -52px") button#drop(onclick="drop()") Drop Markers #map-canvas 

请帮帮我…