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>
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:
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.
I hope my answer solves your doubt!