Search code examples
google-mapsgoogle-places-apigoogle-places-autocomplete

How to get results in google Places API starting from a particular place first

I am creating a small solution by using the Google Places API.

When I am searching "30306" its showing me these results: multiple options but not GA(Georgia)

enter image description here

while on an another example site when I am searching the same keyword its showing this: only single result of GA.

enter image description here

I just want to know, what params decide how to fetch results from google API, I want to Priorities the results which are near to GA(Georgia) and then rest results if any.

The simple implementation I have done is:

autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */ (
      document.getElementById("autocomplete")
    )
  );
Solution

  • Try following

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
            center: {
                lat: 40.749933,
                lng: -73.98633
            },
            zoom: 13,
        });
        const input = document.getElementById("autocomplete");
        const autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo("bounds", map); // This is the option that list down your requirement;
    }
</script>

<body>
    <input id="autocomplete" type="text" placeholder="Enter a location" style="width: 50%; position: fixed; z-index: 99999;" />
    <div id="pac-container">
        <div id="map"></div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly" async></script>
</body>

</html>