What is preventing me from loading Google Maps within my Angular 2 component?

Question

What is preventing me from loading Google Maps within my Angular 2 component?

Below is the TypeScript code for my component:

import {Component, OnInit, Output, EventEmitter} from '@angular/core';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent implements OnInit {
  title = 'Dashboard';
  private map: any;

    constructor() {
      let brussels = new google.maps.LatLng(50.82, 4.35);
      var mapOptions = {
        zoom: 9,
        center: brussels
      };
      this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

      var marker = new google.maps.Marker({
        position: brussels
      });
      //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
      marker.setMap(this.map);
    }

  ngOnInit(){

  }

This is the HTML template associated with the component:

<h1>
  {{title}}
</h1>
<div id="googleMap"></div>
<div id="legend-container"><h3>Legend</h3></div>
<div id="info-box" style="">?</div>

I have declared the Google Maps API key in the main index.html file. However, I am facing issues loading the map into the component. The console is showing errors related to the undefined 'google' object:

Error Message: ReferenceError: google is not defined
Stack Trace: [error_handler.js:51]
               [ErrorHandler.handleError @ error_handler.js:51]
               [...and so on...]

If anyone has any suggestions or solutions to resolve this problem, I would greatly appreciate it :)

javascript angularjs google-maps google-maps-api-3 angular

Answer 1

Answer №1

It appears that the Google Maps API has not been loaded yet. To resolve this issue, you should load it asynchronously and initialize the map after it has finished loading. For more information on loading Google Maps asynchronously, refer to this helpful question.

@Günter Zöchbauer also suggested initializing the map after the view has been initialized (in ngAfterViewInit). Here is an example:

export class AppComponent implements AfterViewInit {
  title = 'Dashboard';
  private map: any;

  constructor(private el:ElementRef) {
  }

  onMapsReady(){
    let brussels = new google.maps.LatLng(50.82, 4.35);
    var mapOptions = {
      zoom: 9,
      center: brussels
    };
    this.map = new google.maps.Map(this.el.nativeElement, mapOptions);
    var marker = new google.maps.Marker({
      position: brussels
    });
    //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
    marker.setMap(this.map);
  }
  
  ngAfterViewInit(){
    (<any>window).googleMapsReady=this.onMapsReady.bind(this);
     var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = "http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=googleMapsReady";

  }

}

NB: It is recommended to load the API using a service for better efficiency.

Answer 2

It appears that the Google Maps API has not been loaded yet. To resolve this issue, you should load it asynchronously and initialize the map after it has finished loading. For more information on loading Google Maps asynchronously, refer to this helpful question.

@Günter Zöchbauer also suggested initializing the map after the view has been initialized (in ngAfterViewInit). Here is an example:

export class AppComponent implements AfterViewInit {
  title = 'Dashboard';
  private map: any;

  constructor(private el:ElementRef) {
  }

  onMapsReady(){
    let brussels = new google.maps.LatLng(50.82, 4.35);
    var mapOptions = {
      zoom: 9,
      center: brussels
    };
    this.map = new google.maps.Map(this.el.nativeElement, mapOptions);
    var marker = new google.maps.Marker({
      position: brussels
    });
    //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
    marker.setMap(this.map);
  }
  
  ngAfterViewInit(){
    (<any>window).googleMapsReady=this.onMapsReady.bind(this);
     var script = document.createElement("script");
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
    script.src = "http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=googleMapsReady";

  }

}

NB: It is recommended to load the API using a service for better efficiency.

Answer 3

Answer №2

At this stage, the googleMap element is not present in the DOM. It should be moved to the ngAfterViewInit() method.

 export class AppComponent implements OnInit {
    title = 'Dashboard';
    private map: any;

    ngAfterViewInit() {
      let brussels = new google.maps.LatLng(50.82, 4.35);
      var mapOptions = {
        zoom: 9,
        center: brussels
      };
      this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

      var marker = new google.maps.Marker({
        position: brussels
      });
      //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
      marker.setMap(this.map);

    }
 }

Answer 4

At this stage, the googleMap element is not present in the DOM. It should be moved to the ngAfterViewInit() method.

 export class AppComponent implements OnInit {
    title = 'Dashboard';
    private map: any;

    ngAfterViewInit() {
      let brussels = new google.maps.LatLng(50.82, 4.35);
      var mapOptions = {
        zoom: 9,
        center: brussels
      };
      this.map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

      var marker = new google.maps.Marker({
        position: brussels
      });
      //google.maps.event.addListener(marker, 'click', ( () => this.select.next("i was a map click")) )
      marker.setMap(this.map);

    }
 }

Answer 5

Answer №3

Make sure to include these 2 files in your index.html file:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

For additional information, check out this link - https://developers.google.com/chart/interactive/docs/basic_load_libs

Answer 6

Make sure to include these 2 files in your index.html file:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

For additional information, check out this link - https://developers.google.com/chart/interactive/docs/basic_load_libs

What is preventing me from loading Google Maps within my Angular 2 component?

Answer №1

Answer №2

Answer №3

Similar questions

Error: Invalid character encountered during login script JSON parsing

React powered interactive tables

Unable to compile TypeScript files using gulp while targeting ES5

The scope's attribute is present, but the variable within the scope's attribute is not

Unexpected error: Undefined value in AngularJS push

When I click on my div, the color does not change as expected

Trouble with AngularJS Smart Table when dealing with live data streams

Promises and Their Valuable Variables

Display a preview of a React component

UI-router issue: UI view and links not functioning properly

Having difficulty retrieving model values from the angular ui modal dialog

Learn how to pass an id from the query parameters to the getInitialProps function in Next.js

Tips for saving information in an array with Vue.js?

Create dynamic cells for CSS grid using JavaScript

Adjustable Scroll Bar

Mocha retries causing logging malfunction: a problem to address

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

Is there a way to display the data from a URL as selectable options in a dropdown menu?

Animating CSS using JavaScript

jQuery sends ajax success to input type number