Worldwide City lookup javascript autocomplete list powered by Google Maps data API

No specific Bitcoin Bounty has been announced by author. Still, anyone could send Bitcoin Tips to those who provide a good answer.

Noticed this in one of the websites - the "City" input field has a nice autocomplete lookup apparently powered by Google Maps data. What is the API powering this javascript city search box?

enter image description here

1 Answer

Internet users could send Bitcoin Tips to you if they like your answer!

Well they are obviously using this API:

Google Maps API - Autocomplete for Addresses and Search Terms

You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest.

In order to use autocomplete, you will need to load the Google Places library using the libraries parameter in the bootstrap URL for the Google Maps JavaScript API:

<script type="text/javascript" src=""></script>

How to return cities only

Note that by default it is an address lookup, not a city lookup. To restrict it to return cities only, use an options argument for the Autocomplete object constructor. The (cities) type collection instructs the Places service to return results that match either locality or administrative_area3 (this means "cities" of certain size, i.e. not a remote rural cottage village)

var input = document.getElementById('cityLookupTextField');
var options = {
  types: ['(cities)']

autocomplete = new google.maps.places.Autocomplete(input, options);

Too many commands? Learning new syntax? is a free tool to save your favorite scripts and commands, then quickly find and copy-paste your commands with just few clicks.

Boost your productivity with!

Post Answer