Google Maps javascript doesn't show

Question

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

I've included the scripts in the html with my API KEY(also I'm working with 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:

 <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??

Answer 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.

Answer 2

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

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