Search code examples
angulargoogle-mapsgoogle-maps-api-2

Google place autocomplete not suggesting some places


I’m building an angular-cli application which it’s users can select their desired destination by typing and my application suggest some places according to the user input. For this I’m using @agm/core .
Basically my code is functional but the problem is it’s not suggesting some certain places. These places are shown when we doing a normal google map search.

For example when I search “University of Kelaniya” , my application saying that “no result” but in the other hand this web site’s google powered autocomplete is suggesting even the Faculties inside the university.

So I needed to figure out that what is the reason for this ? Is it error of my code or any kind of Pro version of google map?

Here is my code

Import array In app.module.ts

imports: [
  BrowserModule,
  RoutesModule,
  MatFormFieldModule,
  MatNativeDateModule,
  MatInputModule,
  BrowserAnimationsModule,
  AgmCoreModule.forRoot({
    apiKey: 'my api key',
    libraries : ['places']
  })

],

app.component.ts

import {Component, ElementRef, NgZone, OnInit, ViewChild} from '@angular/core';
import { MapsAPILoader} from '@agm/core';
import {} from '@types/googlemaps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';

  @ViewChild('search') public searchElement: ElementRef;
  constructor(private  mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {
  }
  ngOnInit() {
    this.mapsAPILoader.load().then(
      () => {
        let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement,{ types:['address']});
        autocomplete.setComponentRestrictions({'country' : ['lk']});
        autocomplete.addListener('place_changed' , () => {
          this.ngZone.run( () => {
            let place: google.maps.places.PlaceResult = autocomplete.getPlace();
            if ( place.geometry === undefined || place.geometry == null ) {
              return;
            }
          })
        })
      }
    )
  }

}

app.component.html

<div class="container">
  <h1>Google maps</h1>
<div class="form-group">
  <input type="text" autocomplete="off" placeholder="search for lacaito" autocapitalize="off" class="form-group" #search>
</div>

</div>

Solution

  • You initialise the place autocomplete in the following form

    let autocomplete = new google.maps.places.Autocomplete(this.searchElement.nativeElement,{ types:['address']});

    Note the types restriction in your code, this restriction instructs to return only results of type address.

    Now have a look at the 'University of Kelaniya' in geocoder tool:

    https://google-developers.appspot.com/maps/documentation/utils/geocoder/#place_id%3DChIJR8eAMwNY4joRM96rLIkHxxI

    You can easily see that the type of this feature is establishment, point_of_interest, university. It doesn't have type address, so it doesn't appear in your autocomplete.

    enter image description here

    I hope my answer solves your doubt!