Incorporating javascript maps into Angular

Question

I am trying to incorporate Javascript google maps into my Angular 8 project in order to add more functionality than AGM. I have created a typings.d.ts file and included my javascript in the angular.json but i am still getting the error: 'map' is declared but its value is never read. Here is 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;

It says that imported 'map' is not used. import * as map from 'map'; Either use the map or remove the import statement if not required. — Ininiv
– Ininiv, Commented Dec 2, 2019 at 4:52
Are you able to display google maps div in your browser in normal without adding typings.d.ts file? By just including external script? — Pallamolla Sai
– Pallamolla Sai, Commented Dec 2, 2019 at 18:23
@PALLAMOLLASAI that’s how I thought it should work too... I get no error when I do that though... pretty sure I referenced my apiKey correctly too in the sript src — Jonathan
– Jonathan, Commented Dec 2, 2019 at 18:40

Pallamolla Sai · Accepted Answer · 2019-12-02 19:28:28Z

1

Following code displated google maps in developer mode.

html

<div style="width: 1000px;height: 300px;" id="map"></div>

component.ts

constructor() { 

var dynamicScripts = ["https://maps.googleapis.com/maps/api/js?key="apiKey"];

  for (var i = 0; i < dynamicScripts.length; i++) {
    let node = document.createElement('script');
    node.src = dynamicScripts [i];
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }
}
initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
  });

 }
 ngOnInit() {
   setTimeout(()=>{ // 
     this.initMap();
   },2000);
 }

Note Instead of setTimeout we can use promies.then().

answered Dec 2, 2019 at 19:28

Pallamolla Sai

2,5131 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Over a year ago

thank you for the help, is the reason I couldnt load it normally because it is dynamic?

Pallamolla Sai Over a year ago

I think so. I will try to search more on this and will let you know..

Jonathan Over a year ago

So far everything seems to be working well except the clusterer package

Collectives™ on Stack Overflow

Incorporating javascript maps into Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related