I have a Angular 9 (just migrated from 8), I need to use the Google Places API (I have a API key) for a Address Autocomplete, I can show the map with the @angular/googlemaps library but I can't make the Autocomplete work...
I tried to use the https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete code, but I can't make angular to use the javascript... or try to use the @agm/core
and @angular-material-extensions/google-maps-autocomplete
, also not working...
My best bet is to use it as native as possible, but I don't know how to use just javascript in Angular... there is a angular native component like the maps? o how can I implement the javascript way that Google uses in the demos?
First, enable Google Places API Web Service. Get the API key. You will have to use it in the script tag in html file. Use script file to load the autocomplete class.
From the control panel, select the search engine you want to edit. Click Search features from the menu on the left and then click the Autocomplete tab. Click on the slider to set Enable autocomplete to On. It can take up to 2-4 days for autocompletions tailored to your search engine to start appearing.
Angular should be able to use the googlemaps apis directly without too much of an issue.
The below code is using @agm/core for the map, however the autocomplete is just using the basic google maps api. If you still have issues, it maybe worth trying some of the following:
component.html
<div class="map-container">
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</div>
<div id="pac-container">
<input #search id="pac-input" type="text" placeholder="Enter a location">
</div>
component.ts
import { Component, OnInit, ElementRef, ViewChild, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
@Component({
selector: 'app-map',
templateUrl: './component.html',
styleUrls: ['./component.css']
})
export class MapComponent implements OnInit {
lat: string;
lng: string;
zoom = 1;
private geoCoder;
@ViewChild('search')
public searchElementRef: ElementRef;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone) { }
ngOnInit() {
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
this.geoCoder = new google.maps.Geocoder;
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.lat = place.geometry.location.lat();
this.lng = place.geometry.location.lng();
this.zoom = 12;
});
});
});
}
}
component.css
.map-container {
bottom: 0px;
top: 0px;
left: 0px;
position: absolute;
right: 0px;
}
agm-map {
height: 100%;
width: 100%;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
z-index: 5000; /* not setting this can lead to angular hiding the autocomplete */
position: absolute; /* not setting this can lead to angular hiding the autocomplete */
}
Your app module will need to import the @agm/core properly.
AgmCoreModule.forRoot({
apiKey: 'yourapikey',
libraries: ["places"],
apiVersion: 'quarterly'
}),
You may use this library instead https://github.com/angular-material-extensions/google-maps-autocomplete.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With