Level 50
You need to enable billing on your Google account - visit https://console.cloud.google.com/project/_/billing/enable to do this.
Jul 8, 2021
6
Level 6
google map api autocomplete not working
I want to add google map api autocomplete to an address input. I followed the documentation and create an API key.
here is my app.blade.php:
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!--Google Map Autocomplete -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGuk0kb5FQ24LflR1C7BtGIE24xaQHfOg&libraries=places"></script>
<style>
.background-img {
background-image: url('images/login_background.png');
background-repeat: no-repeat;
background-size: 100%;
}
.bg-color-navbar {
background-color:#2d2d2d;
}
</style>
</head>
<body>
<!-- Navigation bar -->
@include('layouts.dashboard.navigation-dashboard')
<div id="app">
<!---Side Bar---->
@include('layouts.dashboard.sidebar-dashboard')
<main class="py-4 sidenav-margin-left">
@yield('content')
</main>
</div>
<!-- Optional JavaScript -->
<!-- Popper.js first, then CoreUI JS -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.min.js"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('customerAddress'));
google.maps.event.addListener(places, 'place_changed', function () {
});
});
</script>
</body>
</html>
The autocomplete did not show up when I write something on it. I check the dev tools and it seems to mention:
Places API error: BillingNotEnabledMapError
Is there anything wrong with my code?
I do not want to create billing as it requires credit card info.
Or did i miss out anything?
Level 6
Yea but it requires me to enter credit card credentials, is there any work around?
I am using for development testing.
Level 50
As far as I'm aware no. If you're testing locally I highly doubt you'd get any form of charge at all. When you put the map into production where you'll get traffic, you'll obviously get a charge there.
However, if you loook at the pricing, at https://cloud.google.com/maps-platform/pricing/sheet, the amount Google charge is pretty much next to nothing due to the scales they're working at.
Pretty sure Google do give you free credit, in a similar fashion to AWS's free tier.
Level 6
Alright then, was the API always paid? I thought it was free in the past.
Level 50
It was free, iirc the change around early 2019.
Level 1
I was also adding Google autocomplete address in my Laravel 11 project, at that time I was getting this error. Then I searched Google and found this guide tutsmake.com/laravel-google-autocomplete-address-example/, with the help of which my error was solved.
Please or to participate in this conversation.