Errors after adding @agm/core import statement (Angular 7)

653 views Asked by At

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>
0

There are 0 answers