谷歌地图javascript没有显示

I'm developing a web application with NodeJS and AngularJS. Now, I'm trying to put a heatmap with heatmapjs and gmap plugin.

我正在使用NodeJS和AngularJS开发Web应用程序。现在，我正在尝试使用heatmapjs和gmap插件设置热图。

I've included the scripts in the html with my API KEY(also I'm working with Chartjs):

我已经使用我的API KEY在html中包含了脚本（我也在使用Chartjs）：

<script src="/node_modules/chart.js/dist/Chart.js"></script>
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=MY_APIKEY">
    </script>
    <script src="/node_modules/heatmap.js/build/heatmap.js"></script>
    <script src="gmaps-heatmap.js"></script>

I've copied the example into my angular controller:

我已将示例复制到我的角度控制器中：

// don't forget to add gmaps-heatmap.js
    var myLatlng = new google.maps.LatLng(25.6586, -80.3568);
// map options,
    var myOptions = {
        zoom: 3,
        center: myLatlng
    };
// standard map
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// heatmap layer
    var heatmap = new HeatmapOverlay(map,
        {
            // radius should be small ONLY if scaleRadius is true (or small radius is intended)
            "radius": 2,
            "maxOpacity": 1,
            // scales the radius based on map zoom
            "scaleRadius": true,
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries
            //   (there will always be a red spot with useLocalExtremas true)
            "useLocalExtrema": true,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
            valueField: 'count'
        }
    );

    var testData = {
        max: 8,
        data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}]
    };

    heatmap.setData(testData);

I put the map in the HTML:

我把地图放在HTML中：

<div class="row">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-user" aria-hidden="true"></i> Mapita de calor
                </div>
                <canvas id="map-canvas"></canvas>
            </div>
        </div>

There is no errors y the console but the map into page doesn't appear, so why??

控制台没有错误，但是没有出现到页面的地图，为什么？

2 个解决方案

#1

You need to set up some height and width in your html/css for the maps to appear. By default they take 0 height and 0 width.

您需要在html / css中设置一些高度和宽度才能显示地图。默认情况下，它们的高度为0，宽度为0。

#2

Adding to Alankar Anand's answer, You also need to have a callback method in order to initialize the map

添加到Alankar Anand的答案，您还需要一个回调方法来初始化地图

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& callback=initMap">
</script>

#1