Javascript Google Places API to Display Nearby Places Info in Table Using Autocomplete Location Field

 

 

Welcome folks today in this blog post we will be using the google places api to find nearby places information and display it inside the table. We will be using the given location from the autocomplete location field in browser using javascript.

 

 

LIVE DEMO

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

 

 

As you can see we have the above html for the web app in which we have the address autocomplete field where we allow the user to enter the pinpoint location using the google geocode api and then we have the select field where we have different options to select place types. And then we have the table where we show the information of the places such as the name and the picture of the place. And also at the bottom we are including the script tag of the google places api and here you need to copy paste your own api_key from google cloud console and also you need to enable the apis as shown below

 

 

 

 

 

 

And also as you can see we are executing the initMap() method inside the callback parameter. So when the library is loaded this function will automatically execute. So now we need to write the javascript code and define this function as shown below

 

 

 

 

As you can see in the above function we are fetching all the autocomplete location suggestions from the geocode api of google and then inserting them to the autocomplete field using it’s id. And then we are binding a listener to the input field such that whenever the location is changed by the user then searchNearbyPlaces() method will execute everytime as shown below

 

 

 

 

And also when the value of the place type select field changes then also we need to execute the same searchNearbyPlaces() method so we binded a onchange event listener as shown above.

 

 

 

 

As you can see we are getting the location selected by the user and then we are calling the places api to get details about the location and here we are passing the location and then we are also passing the radius value to be 500 and then we are passing the place type and then if this request is successful then callback function will execute automatically.

 

 

 

 

 

As you can see inside the above callback function we are getting the no of places returned and then we are using the simple for loop to iterate over each place and insert it or display it inside the table fetching the name and the picture of the place and for this we are calling the createMarker() method and passing the actual result

 

 

 

 

As you can see we are getting the place object and from that we are getting the name and photos properties and then we are creating the table element and inside it we are displaying these two things such as the name and the picture of the place. If the picture is not present for any place then we are showing the placeholder image.

 

 

 

 

FULL SOURCE CODE

 

 

index.html