CODEWITHSUNDEEP
phplaravelgeolocationlaravel-5.4
F.ture
F.ture

Reputation: 245

google map api no display laravel 5.4

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>

Upvotes: 0

Views: 454

Answers (2)

Wesley-Sinde
Wesley-Sinde

Reputation: 377

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

Upvotes: 0

Mihir Bhende
Mihir Bhende

Reputation: 9055

  1. Please make sure the google maps JS is included properly before you call it in javascript.

  2. The google map is there but its not visible, please add hight and width:

    <div id="map-canvas" style="width:300%;height:300px;"></div>

Upvotes: 2

Related Questions