Specifying Starting Location For Google Places Autocomplete with Angular

Question

I'm using the Google Places Autocomplete API with Angular provided by AGM. It works great, but I'm having trouble setting my starting location manually. Meaning, if I'm sitting at my computer in Los Angeles, I would like the ability to tell the API to return results as if I were in Boston. I believe this is possible on Google's end, based on their documentation, but I've yet to figure out how to do it within the Angular component I'm using.

Anyone have a tip for how to get this to work? Below is the relevant section of my component. Thanks!

  setGoogleMapsAutocomplete() {
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          let place = autocomplete.getPlace();

          this.address = '';

          for (var i = 0; i < place.address_components.length; i++)
          {
            var addressType = place.address_components[i].types[0];

            if (this.hasOwnProperty(addressType)) {
              let nameLength = addressType == 'administrative_area_level_1' ? 'short_name' : 'long_name';

              this[addressType] = place.address_components[i][nameLength];
            }
          }
          this.error = false;
        });
      });
    });
  }

Do you want to show the historical places that you were at before on the map? or am I misunderstand? :) — Seyhmus Gokcen, Feb 06 '19 at 22:40
Not necessarily - just tell Google to start serving results as though the user is physically in Chicago, even if they aren't. So like typing "23 Michigan Avenue" will return "23 Michigan Avenue, Chicago, IL" instead of "23 Michigan Avenue, Somerville, MA" or whatever other result is closer to the user's physical location. — jackel414, Feb 06 '19 at 23:42

Dmitry · Accepted Answer · 2019-02-07T00:37:59.237

1

Apparently you've been using code from this example https://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

Have you tried to add location key and pass lat,lon as value to the object you're passing as a second argument to google.maps.places.Autocomplete. So it should be like:

    let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"],
        radius: 50000,
        location: `${this.latitude}, ${this.longitude}`
    });

I've created a stackblitz sandbox for you https://stackblitz.com/edit/angular-google-maps-demo-qwrngk

Feel free to play around, but don't forget to change the API key, because mine quota is seems to be exceeded.

UPDATE

You need also set the radius within which you want to return place results.

edited Feb 07 '19 at 00:37

answered Feb 06 '19 at 23:44

Dmitry

729
7
19

So, I tried that. Still though, when I start typing an address it gives me results for the Boston area (which is where I am currently). Based on the lat/lng in your example, the results should be for some place in Kansas. – jackel414 Feb 07 '19 at 00:01
Okay, there's also `radius` option, to tell within which area you want to return place results. Note that it will NOT fully restrict results to the specified area. Here's another really simple sandbox https://jsfiddle.net/coldshine/0bjv62c9/15/ where location is set to Chicago and if you type "23 Michigan Avenue" - "23 Michigan Avenue, Chicago, IL" Chicago will be the first. – Dmitry Feb 07 '19 at 00:36
Yeah, that seems to work nicely in your example. I'll try it myself and let you know how it turns out! Thanks for your help! – jackel414 Feb 07 '19 at 04:22

Specifying Starting Location For Google Places Autocomplete with Angular

1 Answers1