CODEWITHSUNDEEP
google-mapsautocompletegoogle-api
meidanisalekos
meidanisalekos

Reputation: 51

Google Maps autocomplete field doesn't list adresses

I have created a project on Google api Console and got a Browser Key in order to display a textbox with Google Map autocomplete. Although I am not getting any error in the browser console, the autocomplete doesn't work. Here is my html

<html>
<head>
    <meta charset = "utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>

<body onload = "initialize();">
<form method = "post">
    <input type = "text" id = "autocomplete" placeholder = "Η Διευθυνσή σας"/>
</form>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmm_XsU6QttZNhw1RfxRHTpavpbN33jX0&libraries=places,geometry" async defer></script>
<script type = "text/javascript">
        var autocomplete;
        function initialize() {
          autocomplete = new google.maps.places.Autocomplete(
              /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
              { types: ['geocode'] });

        }
    </script>
</body>

and here is my test page: http://www.lefko-cafe.gr/content/addrress_finder.php

The weird thing is that the exactly same html is working in another domain (except the key): http://www.laoskaikalamaki.gr/content/addrress_finder.php

Upvotes: 0

Views: 1549

Answers (3)

Kshitij
Kshitij

Reputation: 339

api-key is needed if your domain is after june 22,2016. You need to enable following api if you want to use google autocomplete only with javascript

  • Google Maps JavaScript API
  • Google Places API Web Service

Upvotes: 0

kaskader
kaskader

Reputation: 1972

With the changes to Maps API Standard Plan if you want to use the Places Service you need to enable Google Places API Web Service in the developer console

The same goes for any other Service, if you want to us Directions you need to enable Google Maps Directions API, if you want to use Geocoding you need to enable Google Maps Geocoding API.

This changed recently, so no need to be sorry.

Upvotes: 3

geocodezip
geocodezip

Reputation: 161334

Neither of your examples works for me. The onload event and the completion of the script load are two different asynchronous events, they may fire in different orders on different server/browser locations. I get a javascript error Uncaught TypeError: Cannot read property 'innerHTML' of null You have async defer in your include of the API but no &callback=initialize parameter.

code snippet:

<body> <!-- remove onload = "initialize();" -->
<form method = "post">
    <input type = "text" id = "autocomplete" placeholder = "Η Διευθυνσή σας"/>
</form>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmm_XsU6QttZNhw1RfxRHTpavpbN33jX0&libraries=places,geometry&callback=initialize" async defer></script>


<form method="post">
  <input type="text" id="autocomplete" placeholder="Η Διευθυνσή σας" />
</form>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&callback=initialize" async defer></script>
<script type="text/javascript">
  var autocomplete;

  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */
      (document.getElementById('autocomplete')), {
        types: ['geocode']
      });
  }
</script>

Upvotes: 1

Related Questions