CODEWITHSUNDEEP
angulartypescriptgoogle-mapsangular-components
Enesxg
Enesxg

Reputation: 127

Unknown "google is not defined" Google Maps integration in Angular 6

Here's the context of the problem I am trying to solve: I am trying to program a google map integration with a heat map overlay. It currently should be a visible map centered in San Francisco (later I will add a button to overlay the heat map and toggle the heat map). Yet, I keep getting this error in my console stating:

ERROR ReferenceError: google is not defined at HeatMapComponent.push../src/app/heat/heat-map/heat-map.component.ts.HeatMapComponent.ngOnInit

Here is the code for my angular component:

heat-map.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {   } from '@types/googlemaps';



@Component({
selector: 'app-heat-map',
templateUrl: './heat-map.component.html',
styleUrls: ['./heat-map.component.css']
})
export class HeatMapComponent implements OnInit {
  @ViewChild("gmap") gmapElement: any;

  public heatmapData: Array<google.maps.LatLng>;
  public verb: google.maps.LatLng;
  public map: google.maps.Map;

  public heatmap: google.maps.visualization.HeatmapLayer;
  public heatMapON: boolean;

  constructor() { }

  ngOnInit() {
     this.heatmapData = [
        new google.maps.LatLng(37.2, -122.7),
        new google.maps.LatLng(37.2, -122.5),
     ];

     this.cool = new google.maps.LatLng(37.2, -122.04);

     var mapProp = { center: this.cool, zoom: 3, mapTypeId: 
                 google.maps.MapTypeId.SATELLITE };

     this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

     this.heatmap = new google.maps.visualization.HeatmapLayer({
                    data: this.heatmapData
     });

     this.heatMapON = false;
     }

  toggleHeatMap(event){
     console.log("Heat Map is now overlayed on google Map", event)
     this.heatMapON = !this.heatMapON
     if (this.heatMapON) {
        this.heatmap.setMap(this.map);
     }
     else {
        this.heatmap.setMap(null)
     }
  }
}

heat-map.component.css

 #gmap {
     height: 400px;
     width: 100%;
 }

heat-map.component.html

 <div #gmap></div>
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=visualization">
 </script>

And nothing of this component is displayed on my localhost.

Upvotes: 2

Views: 2805

Answers (1)

Brad Axe
Brad Axe

Reputation: 815

The problem is that the script for maps is being called within the heat-map.component.html

It should be referenced in the index.html of your project in <head> and furthermore, I believe the async and defer attributes added on the script tag are causing it not to load in sequence, and therefore is non-existent when heat-map.component is calling it.

<head>
  <meta charset="utf-8">
  <title>Gmaps</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=visualization"></script>
</head>

Info on defer/async

Upvotes: 3

Related Questions