Autocomplete only city name List using Google Maps API

Question

I use the following code for my website but it does not work. What is the problem? I've included the snippet for error reporting.

 <head>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript">
</script>

    <script type="text/javascript">

        function initialize() {
            var options = {
                types: ['(cities)'],
                componentRestrictions: {country: "us"}
            };

            var input = document.getElementById('searchTextField');
            var autocomplete = new google.maps.places.Autocomplete(input , options);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>
<body>

    <div class = "row">
        <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
    </div>
    </body>

What doesn't work exactly? Do you get any error messages? – Iavor Mar 26 '18 at 18:40 — Iavor, Mar 26 '18 at 18:40
No i want only City name . – Tanwir Alam Apr 03 '18 at 10:36 — Tanwir Alam, Apr 03 '18 at 10:36

Iavor · Accepted Answer · 2020-07-23T15:38:00.493

2

Remove sensor=false& from your script's src attribute and instead add your API key:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

The following worked for me:

<body>
  <input id="searchTextField" />
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script>
    function initialize() {
      var options = {
        types: ['(cities)'],
        componentRestrictions: {
          country: "us"
        }
      };

      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input, options);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>

edited Jul 23 '20 at 15:38

answered Apr 03 '18 at 13:25

Iavor

1,997
16
27

1

For this to work, with your google API key, you need to enable both the Google Maps Javascript API and the Places API. – charles ross Jul 23 '20 at 02:26
Can we test this in keylesss? – AbingPj Aug 10 '20 at 02:23
Do you mean without the API key? – Iavor Aug 10 '20 at 14:46
I've just tested this and it displays the city as well as state and country. Shouldn't it display only the city? – default123 Oct 25 '20 at 22:26
Sorry @default123, I have not worked with the API in a while so I'm not sure. I hope you were able to figure it out. – Iavor Nov 30 '20 at 14:54

Autocomplete only city name List using Google Maps API

1 Answers1