google map api no display laravel 5.4 - php

Question

Why does my google map doesn't display anything ? I've tried other techniques but still it wont show up ?
the api key was already applied .
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat:10.2969,
lng:123.8887
},
zoom:15
});
This is the html file
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Address:</label>
<input type="text" name="address" id="searchmap" autocomplete="off">
</div>
<div class="form-group">
<label class="control-label">lat:</label>
<input type="text" name="lat" id="lat" autocomplete="off">
</div>
<div class="form-group">
<label class="control-label">lng:</label>
<input type="text" name="lng" id="lng" autocomplete="off">
</div>
<div class="form-group">
<div id="map-canvas">
</div>
</div>
</div>

Answer 1

Please make sure the google maps JS is included properly before you call it in javascript.
The google map is there but its not visible, please add hight and width:
<div id="map-canvas" style="width:300%;height:300px;"></div>

Answer 2

To specify the size of the div * element that includes the map, set the map height explicitly at all times:
#map { height: 100px; width: 50%; }
After further investigation, it was discovered that Google modified their business model on June 22, 2018. Since each API has its own unique billing, each API must be activated separately. The following APIs must be enabled in order for geocoding on Google Maps to function properly.
JavaScript API for maps
Directional Assistance
Service for Geocoding
Service for Distance Matrix
Access Service
Locations Library
Unfortunately, it doesn't appear like the Google Console API Manager is functioning properly. They won't appear when you search for an API other than the Maps JavaScript API.
You need to: to access them.
Access the project dashboard.
Then, select "Go to APIS overview."
Toggle "ENABLE APIS AND SERVICES" on.
You may now view the API options.
Do a Google Maps JavaScript API search (Under Google Maps APIs). Clicking on it will reveal an Enable button. To activate API, click.
Read more on-> Blog about google map errors