Google Places Javascript Api Query for Places (Find Places by Name)


Get API Key

Goto Google Cloud Api Console -> Library -> Places API and click Enable. You might want to enable Maps JavaScript API as well.

Goto Google Cloud Api Console -> Credentials -> Create credentials -> API key. You probably want to apply restriction using HTTP referrers (websites). In the Accept requests from these HTTP referrers (websites), you can use some of the following example:

  • *localhost:8088/*
  • **
  • **

Copy the API Key.

NOTE: You can try follow Get Started wizard on Google's page, but I haven't gone through that before.

Include Google Maps Javascript

<div id="map" style="height: 300px;"></div><script async defer src=""  type="text/javascript"></script><script>function initMap() {}</script>

Using PlacesService findPlaceFromQuery

const mapCenter = new google.maps.LatLng(-33.8617374,151.2021291)const map = new google.maps.Map(document.getElementById('map'), {  center: mapCenter,  zoom: 15})const placeService = new google.maps.places.PlacesService(map)const request = {  query: 'japan',  fields: ['place_id', 'name', 'formatted_address', 'icon', 'geometry'],}placeService.findPlaceFromQuery(request, (results, status) => {  if (status == google.maps.places.PlacesServiceStatus.OK) {    results.forEach((item) => {      console.log(item)      // place_id, name, formatted_address, geometry.location, icon    });  }})

NOTE: Refer to PlacesService.findPlaceFromQuery

findPlaceFromQuery only works if the full name is given (e.g. Japan, not Ja or Jap). To use partial name autocomplete feature, use Autocomplete.getPlacePredictions.


❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.