Angular 2如何在多个组件中使用Google Maps

Question

I'm building Angular4 project that uses google maps api. I've built a component called basemap in which I've included the google api through jsonp (to get rid of cross origin error when using http module) as follows (basemap.component.ts):

if (typeof google === 'undefined') {
// google not available so go fetch it
 this.jsonp.get(`https://maps.googleapis.com/maps/api/js?key=MyKEY&callback=JSONP_CALLBACK`)
    .subscribe(res => {
     // google global object available here
    });
} else {
 //google was fetched before and google global object available here
}

and that works pretty good, but the problem when I use this component multiple times in the same page using ngFor

 <div *ngFor="let i of [1,2,3]">  <app-basemap ></app-basemap> </div>

I get the following error in the console You have included the Google Maps API multiple times on this page. This may cause unexpected errors. You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

I can't use this component AGM - Angular Google Maps because I'm using leafletjs as the map visualizing api and google mutant plugin to view google base map.

Answer 1

for any one who come searching for the solution, I've managed to solve the problem using RXJS: I've created a service google-api.service.ts in as the following:

import { Injectable } from '@angular/core';
import { Jsonp, Headers } from '@angular/http';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/retry';

@Injectable()
export class GoogleAPIService {
private googleReadyObservable;
constructor(
   private jsonp: Jsonp
) {
  this.googleReadyObservable = new Subject();
  this.jsonp
  .get(`https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=JSONP_CALLBACK`)
  .retry()
  .subscribe(res => {
    if (res.status === 200) {
      this.googleReadyObservable.complete();
    }
  });
 };

googleReady() {
return this.googleReadyObservable;
  };
}

then in any component foo.component.ts import the service file then inject it in the constructor

constructor ( 
  private googleAPIService: GoogleAPIService
 ){  }

then use it in any function as following:

this.googleAPIService.googleReady()
    .subscribe(
  null,
  err => console.log(err),
  () => {
     // google maps global object loaded
  }
  );

Answer 2

在index.html中为URL提供密钥