How do I add location biasing to Google Places Autocomplete: Javascript API

Question

I have a places autocomplete field that I'm using to have users give a location. The autocomplete form is working, but it is NOT biasing the location as I want. I have the following code:

function activatePlacesSearch() {
  var input = document.getElementById('project-location-input');
  var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var autocomplete = new google.maps.places.Autocomplete(input, location, radius);
  google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
      const place = autocomplete.getPlace();
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      // draw the map
      document.getElementById('new-project-map-div').style.display = 'block'
      var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
      zoom: 15,
      center: new google.maps.LatLng(lat, lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl:false,
      disableDefaultUI: true,
    });

// Set marker position
  var myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: false
    });


  map.setCenter(myMarker.position);
  myMarker.setMap(map);
  });

}

I know that you can query as follows and it works: https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=20&location=53.2910591,-6.1823276&radius=5000&key=AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o

I would like to accomplish this using my code, but I'm doing something wrong here.

Answer 1

Take a look at this section in their docs: google places autocomplete location biasing . You may be able to take advantage of the strictbounds and components params.

If that doesn't get you any closer to what you're trying to accomplish, post a link to a CodeSandbox with your example and I can help you figure it out.

Cheers!

Answer 2

After doing some investigative work here's what I came up with. It seems that unless you are displaying a map on the DOM (it can be positioned out of sight if you don't want to see it) then this doesn't work correctly. Here's an example I found on JSFiddle

//snippet

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
    zoom: 12
  });

And here's my CodeSandbox example using your sandbox and some pointers from the example above.

Answer 3

One option would be to use the AutocompleteOption.bounds . If all you know is a location and a radius, you can create a circle and call getBounds on it (there is no documented way to bias the javascript autocomplete with a location and a radius).

var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var circle = new google.maps.Circle({
    center: location,
    radius: radius
  });
  var autocomplete = new google.maps.places.Autocomplete(input, {
    bounds: circle.getBounds()
  });

proof of concept fiddle

code snippet:

 // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function activatePlacesSearch() { var input = document.getElementById('project-location-input'); var location = {lat: 53.2910591, lng: -6.1823276}; var radius = 1000; var circle = new google.maps.Circle({ center: location, radius: radius }); var autocomplete = new google.maps.places.Autocomplete(input, {bounds: circle.getBounds()}); google.maps.event.addListener(autocomplete, 'place_changed', function(e) { const place = autocomplete.getPlace(); console.log(place); lat = place.geometry.location.lat(); lng = place.geometry.location.lng(); // draw the map document.getElementById('new-project-map-div').style.display = 'block' var map = new google.maps.Map(document.getElementById('new-project-map-div'), { zoom: 15, center: new google.maps.LatLng(lat, lng), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, fullscreenControl:false, disableDefaultUI: true, }); // Set marker position var myMarker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: false }); map.setCenter(myMarker.position); myMarker.setMap(map); }); }

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #new-project-map-div { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <div class="pac-card" id="pac-card"> <div id="pac-container"> <input id="project-location-input" type="text" placeholder="Enter a location"> </div> </div> <div id="new-project-map-div"></div> <.-- Replace the value of the key parameter with your own API key: --> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=activatePlacesSearch" async defer></script>