I'm building a website using Angular 7 and Google Maps (agm) and I want to add a map to the location
component. However, when I add import { MapsAPILoader } from '@agm/core';
to my location.component.ts
file, I get multiple compilation errors that seem to come from agm itself:
ERROR in node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts(50,41): error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts(50,94): error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts(25,93): error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts(25,129): error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.
The code compiles successfully without the aforementioned import statement, but then, of course, the website doesn't work and I can't work with agm :)
Does anyone know how to solve this?
Thanks in advance!
my location.component.ts
code:
/// <reference types="@types/googlemaps" />
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
import {} from 'googlemaps';
import { MapsAPILoader } from '@agm/core'; // <- This causes the problem
@Component({
selector: 'location',
templateUrl: './location.component.html',
styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
@ViewChild('map') mapElement: any;
map: google.maps.Map;
constructor(private route: ActivatedRoute, private mapsAPILoader: MapsAPILoader) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
console.log("carNumber in queryParams= " + params["carNumber"]);
});
this.mapsAPILoader.load().then(() => {
const mapProperties = {
center: new google.maps.LatLng(35.2271, -80.8431),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapProperties);
});
}
}
My location.component.html
:
<div #map style="width:100%;height:400px">
<script src="http://maps.googleapis.com/maps/api/js?key=apikeyaddedhere"></script>
</div>