I am currently working on integrating Javascript Google Maps into my Angular 8 project to enhance the functionality beyond what AGM offers. Despite creating a typings.d.ts file and including my JavaScript in the angular.json, I keep encountering the error: 'map' is declared but its value is never read. Below is an overview of my code...
component.html
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key={{apiKey}}&callback=initMap"
async defer>
</script>
<script >
</script>
</body>
</html>
component.ts
import * as map from 'map';
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-google-maps',
templateUrl: './google-maps.component.html',
styleUrls: ['./google-maps.component.css']
})
export class GoogleMapsComponent implements OnInit {
private apiKey = environment.googleMapsAPIkey;
constructor() { }
ngOnInit() {
}
}
maps.js
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
typings.d.ts
declare module Map {
export interface Main {
map;
}
}
declare var Map:Map.Main;