Solvedangular google maps How to Support "Google Place Autocomplete" (with example)

Having spent tens of hours to find how to support "Autocomplete", I share with you my solution (which is technically completely independent from the angular2-google-maps API at the moment, since I did not succeeded in reusing the LazyMapLoading 😛 ).

Here is a plunker which shows how to:
http://plnkr.co/edit/NtfCPol50mlwGoiB8UZu

What I've done:
1/ I'm loading the Google Maps API (with the "places" library) directly in the index.html (line 28), so I have to use the "no lazy load" functionality in the main.ts (line 135). Note that in my personal implementation, I am not using "Bootstrap", but I declare the providers in the @Component
2/ I make a reference to the Google Map API (main.ts line 19)
3/ I connect the Autocomplete in the ngOnInit (main.ts lines 63 to 73)

Tip : main.ts line 63 I have a reference to the input field. Here, I simply used a "getElementByID()". In my real project, I needed to use a "querySelector()"... I precise in case you have issues selectionning the input filed...

IMPROVEMENT (if someone know how to) :
How could we use the "Lazy Loader"? I do not know how to access the google reference after lazy loading.

BUG?
Why when the location changed and that I change the latitude and longitude it's only taken into account if I click the map? You could put an alert (or simply read the console) and you will see that the modification of the values is not made after the click.
=> I've updated the plunkr thanks to a solution provided by @cesargalindo
https://gitter.im/SebastianM/angular2-google-maps?at=576197ff36c83a880205fd64

PS: yeah, it's that easy. But it's my first Angular project, and I'm learning directly by doing. So simple tasks become quite difficult! 😆

21 Answers

✔️Accepted Answer

@Pitouli hello, thanks for your solution, i have used it and found a better way to support Autocomplete, because when using your solution i had multiple google api warning and my map crashed when using SebmGoogleMap directive.

Here is the solution:

In my main.ts

import {GOOGLE_MAPS_PROVIDERS, provideLazyMapsAPILoaderConfig} from 'angular2-google-maps/core';

bootstrap(AppComponent, [
    GOOGLE_MAPS_PROVIDERS,
    provideLazyMapsAPILoaderConfig({
        apiKey: 'myApiKey',
        libraries: ['places']
    })
]);

And in my app.component.ts

import {MapsAPILoader} from 'angular2-google-maps/core';

declare var google: any;

//@Component...

//export class...

constructor(
        private _loader: MapsAPILoader) {
    }

autocomplete() {
        this._loader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(document.getElementById("autocompleteInput"), {});
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
                let place = autocomplete.getPlace();
                console.log(place);
            });
        });
}

You now can get rid of:
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

It also worked with :

google.maps.Geocoder

so i think it works with all the google maps object classes.

Hope it helps. 😃

Other Answers:

Instad of using bootstrap in main.ts, Just use

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'YOUR API KEY',
      libraries: ['places']
    }),

in your app.module.ts.

Related Issues:

87
angular google maps Angular 4 Universal - SyntaxError: Unexpected token export
Updated the solution to the latest version of babel @philippeboyd @dkmostafa i solved the same issue...
69
angular google maps How do I resize an icon ?
I am able to use the Icon object against the iconUrl property of the marker My icon looks like: And ...
36
angular google maps Using Geocoder with GoogleMapsAPIWrapper
How about this - I saw in issue #139 you are providing the ability to access google.maps object via ...
31
angular google maps how to initilize the module with variable apiKey
Depends on what kind of build tool you are using (e.g angular-cli or custom webpack or ...) and wher...
29
angular google maps Failed to display maps in page. ERROR TypeError: Object(...) is not a function
Since you are creating Angular: 5 application : Angular: 5.2.11 RxJS 5.x package is installed with i...
24
angular google maps Setting strokeWeight on a circle throws an error and doesn't add the stroke
@SebastianM any progress with that regarding information @cesarp provided? this issue is quite old.....
23
angular google maps Lazy-maps-api-loader error
In your app.module.ts imports add: AgmCoreModule.forRoot({ apiKey: 'xxxxxx' Hi @SebastianM ...
22
angular google maps Directions service
This directive can solve your needs Hi Do you have any plan to support the directions service? ...
20
angular google maps How to Support "Google Place Autocomplete" (with example)
@Pitouli hello thanks for your solution i have used it and found a better way to support Autocomplet...
17
angular google maps new @types/googlemaps version generates error:
I managed to Set not ^3.39.12 but 3.39.12 Hello After their latest update of @types/googlemaps (5th ...
15
angular google maps getNativeMap() and getBounds() Promise never gets resolved neither rejected
Hi all! You do not need a child directive to obtain your native map instance You can get it subscrib...
13
angular google maps Clusters are breaking the universal app
I forked js-marker-clusterer project and made the fix It prevents initialization MarkerClusterer whe...
13
angular google maps How to use a Marker Clusterer?
@siegerx3 It's simpler that it sounds first create a custom component or directive: I used a directi...
4
angular google maps My Maps is gray
I am having this issue currently Hi Everything is well configured (I think) (npm install module + ke...
3
angular google maps No MouseOver event handler in AgmDataLayer
Paste this code in your code include it in your declarations Issue description There is no MouseOver...
885
components Error: mat-form-field must contain a MatFormFieldControl.
You have to add to app.module.ts: Bug feature request or proposal: When doing a karma/jasmine test I...
608
angular Angular5.x lazyLoad problem, undefined is not a function
For others that find this issue via Google as i did: I had the same problem when trying to lazy load...
348
angular Cyclic dependency error with HttpInterceptor
I resolved simply not setting authService in constructor but getting in the intercept function. ...
286
angular cli Issue: Cannot read property 'thisCompilation' of undefined
Here is the answer from issues #9793 : npm remove webpack npm install webpack@3.11.0 ...
277
angular Uncaught Error: Can't resolve all parameters for ...
You are missing an @Injectable() annotation on your ApiService Support requests like these should li...
275
ngx bootstrap fix(tooltip): tooltip flickering when hover the mouse on the border on the tooltip position
Add pointer-events: none; to the tooltip css problem solved! .tooltip { pointer-events: none; } ...
266
angular Force reload/refresh current route with RouteReuseStrategy
Hi If you really need to trick the Router into reloading the component on each routerLink click ...
260
angular Misleading error message "Cannot find a differ supporting object '[object Object]'"
I just ran into the same issue I'm not sure if the recommended solution will work for my case ...
255
angular cli Error | Could not find plugin "proposal-numeric-separator" | Generating ES5 bundles for differential loading
Try to install @babel/compat-data: ~7.8.0 to devDependencies This is the only workaround which helpe...
251
angularfire Missing exported members after updating to Angular 6.0.0
It looks like rxjs-compat is missing Use npm i rxjs-compat to install the missing rxjs-compat. ...
246
sheetjs How to simply export a Worksheet to xlsx?
There are two issues: each object is mapped to a row so if you want a row with name John and city Se...
236
angular cli Using invalid environment causes error in build (was "ERROR in Cannot read property 'length' of undefined")
Probably not the same cause but we had the same error (Cannot read property 'length' of undefined) w...
232
angular cli ng serve method ip not open in another machines
The solution is simple Just bind to the correct interface address via ng serve --host=0.0.0.0 ...
226
angular cli Incorrect JS paths when ng build -prod is deployed in a subfolder
When you're deploying to non-root path within a domain you'll need to manually update the <base href...
224
angular update 2 to 4 has problem [ts] Property 'map' does not exist on type 'Observable<Response>'.
I met the same problem with the angular cli 6.0.0 and rxjs 6.1.0 And I solved the problem by replaci...
218
angular cli Installation error: permission denied for node-sas
sudo npm install -g --unsafe-perm --verbose @angular/cli Installation error (node-sass) with: node v...
208
angular cli ng build -prod Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
Instead of use ng build --prod use ng build --env=prod UPDATE As many of us (thx) have mention this ...
184
angularfire ERROR TypeError: Object(…) is not a function” using AngularFirestore and firebase
@jamesdaniels Yes npm install rxjs@6 rxjs-compat@6 --save It solved the issue. I want to use firebas...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
173
angular cli Property 'controls' does not exist on type 'AbstractControl'.
Got it! Looked at the docs - FormArray The FormArray class contains the controls property ...
170
angular Angular2 AoT Compiler Errors
pls try /cc @chuckjaz When I try to compile my project with ngc it throws the below error: Error: Er...
167
angular cli [Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED)
I recomended change { path: 'user-panel' loadChildren: './user-panel/user-panel.module#UserPanelModu...
167
prettier Change HTML/JSX formatting to have one attribute/prop per line
The point I am trying to make is that the vertical space matters Wasting it (too much) has negative ...
164
angularfire @firebase/firestore: Firestore (5.8.0): timestampsInSnapshots
eg: app.module.ts Version info Angular: 7.2.1 Firebase: 5.8.0 AngularFire: 5.1.1 In the newest fireb...
162
angular cli AOT build fails
I noticed same problem and after npm i enhanced-resolve@3.3.0 I can build with AOT ...
161
angular cli Cannot find name 'require'. using relative paths...
Ahhh here we go try adding declare var require: any; To src/typings.d.ts I am using a config with re...
160
components [Table] Add example with dynamic columns
For those interested Bug feature request ...
157
angular starter How to include Twitter Bootstrap 3 using webpack
I just tested it now Hi I have taken a look at #214 & #215 but these don't really explain how to set...
152
angular HttpClient.delete() cannot handle a body in its request
It would be great to have body param in .delete() We just migrated our project to HttpClient and for...
147
ng bootstrap No provider for NgbActiveModal! => "Components as content"
try to provide NgbActiveModal on app.module Bug description: When trying to implement the Modal usin...
146
angular cli "No NgModule metadata found for 'AppModule'" after Upgrade to Angular 5.1.0 and AngularCli 1.6.0
I got the same error The issue is fixed only when i manually re installed angular/cli The webpack sh...
142
angularfire 5.2.1 AngularFireAuthGuard causes TypeError: source.lift is not a function
I worked in this way Performing basic docs for AngularFireAuthGuard produces an error related to sou...
141
angular cli ng serve doesn't listen other than localhost
Works with command ng serve --host 0.0.0.0 OS? Windows 7 8 or 10 Linux (which distribution) Mac OSX ...
140
angular Http - Observable completed function not firing
Third callback haven't been called when error occures ES6 promises hasn't method finally only then a...