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.
Change
import {MapsAPILoader} from 'angular2-google-maps/core';
to
import {MapsAPILoader} from '@agm/core';