Show nearby therapist when user gives place input using google maps javascript api <p>I've integrated google maps javascript api in my web app to use some of its features. I am fetching the user's current location and displaying nearby physiotherapist based on their current location. Now I also want to display nearby physiotherapist base on user's input. Like I am using google search box, so whenever user will type some place and click on search, it will display all the nearby physiotherapist according to that input.</p> <p>I've implemented the following-</p> <ul> <li>Fetching current location</li> <li>Nearby physiotherapist based on current location</li> <li>Autocomplete search box</li> </ul> <p>What I want to achieve-</p> <ul> <li>Show nearby physiotherapist based on user's input (place)</li> </ul> <p>I am getting confused on how to achieve this. It would be great if someone can help me with this</p> <p><strong>Javascript</strong>:-</p> <pre><code>&lt;script&gt; // Determine support for Geolocation and get location or give error if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(displayPosition, errorFunction); } else { alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.'); } // Success callback function function displayPosition(pos) { var mylat = pos.coords.latitude; var mylong = pos.coords.longitude; //Load Google Map var latlng = new google.maps.LatLng(mylat, mylong); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), myOptions); var infowindow = new google.maps.InfoWindow({ map: map }); // Places var request = { location: latlng, radius: '5000', type: ['physiotherapist'] }; var service = new google.maps.places.PlacesService(map); service.search( request, callback ); function callback(results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i &lt; results.length; i++) { var place = results[i]; createMarker(results[i]); } } } function createMarker(place) { var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, marker); }); } var marker = new google.maps.Marker({ position: latlng, map: map, title:"You're here" }); // Create the search box and link it to the UI element. var input = document.getElementById('pac-input'); var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); // Bias the SearchBox results towards current map's viewport. map.addListener('bounds_changed', function() { searchBox.setBounds(map.getBounds()); }); var markers = []; // Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener('places_changed', function() { var places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach(function(marker) { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { var icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25) }; // Create a marker for each place. markers.push(new google.maps.Marker({ map: map, icon: icon, title: place.name, position: place.geometry.location })); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); } // Error callback function function errorFunction(pos) { alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.'); } &lt;/script&gt; </code></pre>