No provider for MapsAPILoader in IONIC

Question

The objetive is to show a search with a google map.

I've got this error in ionic/angular project


    Runtime Error
    No provider for MapsAPILoader!
    Stack
    Error: No provider for MapsAPILoader!
        at injectionError (http://localhost:8103/build/main.js:1655:86)
        at noProviderError (http://localhost:8103/build/main.js:1693:12)
        at ReflectiveInjector_._throwOrNull (http://localhost:8103/build/main.js:3194:19)
        at ReflectiveInjector_._getByKeyDefault (http://localhost:8103/build/main.js:3233:25)
        at ReflectiveInjector_._getByKey (http://localhost:8103/build/main.js:3165:25)
        at ReflectiveInjector_.get (http://localhost:8103/build/main.js:3034:21)
        at AppModuleInjector.NgModuleInjector.get (http://localhost:8103/build/main.js:3981:52)
        at resolveDep (http://localhost:8103/build/main.js:11441:45)
        at createClass (http://localhost:8103/build/main.js:11305:32)
        at createDirectiveInstance (http://localhost:8103/build/main.js:11125:37)

In the app.module


    import {AgmCoreModule} from '@agm/core';
    import {GoogleMapsAPIWrapper} from "angular2-google-maps/core/services/google-maps-api-wrapper";


     imports: [
            AgmCoreModule.forRoot({
                apiKey: '*******', libraries: ["places"]
            }) 
          ]

Then in the Component Page


    import {MapsAPILoader} from 'angular2-google-maps/core';
    constructor(private mapsAPILoader:MapsAPILoader) {


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

                    //verify result
                    if (place.geometry === undefined || place.geometry === null) {
                        return;
                    }

                    this.latitude = place.geometry.location.lat();
                    this.longitude = place.geometry.location.lng();
                    this.zoom = 12;
                });
            });
    });

}

The html page





    <div class="form-group">
                            <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
                        </div>
                        <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
                            <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
                        </agm-map>

So.. I don't have any Idea what happens . Where found Provider or where I have to put.

Swapnil Patwa Swapnil Patwa · Accepted Answer · 2017-07-22T18:52:59

Change

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

to

import {MapsAPILoader} from '@agm/core';

No provider for MapsAPILoader in IONIC

2 Answers