如何在Angular2 +中实现Google Map JavaScript？

Question

I am trying to implement Google Map in my Angular6 component. However, I am unable to do so. I have embedded Google Map JavaScript from -

https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple

My map doesn't load.

app.component.html

<div  id="map"></div>

app.component.ts

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

import { ViewChild, ElementRef, Renderer } from '@angular/core'

const url = '../../../assets/googlemap.js'


@Component({
  selector: 'app-search-api',
  templateUrl: './search-api.component.html',
  styleUrls: ['./search-api.component.scss']
})
export class SearchApiComponent implements OnInit, AfterViewInit {

  PhotoGoogleSDK: any;

  constructor() { }

  ngOnInit() {
 this.loadScript();
  }

  // ------------------ Javascript code  ----------------

  public loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }

}

googlemap.js

     var citymap = {
        chicago: {
          center: {lat: 41.878, lng: -87.629},
          population: 2714856
        }
      };

      function initMap() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), 
         {
          zoom: 4,
          center: {lat: 37.090, lng: -95.712},
          mapTypeId: 'terrain'
        });

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        for (var city in citymap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: Math.sqrt(citymap[city].population) * 100
          });
        }
      }

        var tag = document.createElement('script');
  tag.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCXNFDDBMRr6YX8LJtltvEbQJsLA&callback=initMap";
  tag.defer = true;
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Answer 1

In order to implement google maps in angular2+ you have to do these things.

1. Insert the google map script in your index.html file. (You need to get a API key from Google.)

2. Now in your component.ts declare const google as any

   declare const google: any;

3. Now in your html of your component, add new div with an id

<div id="google_map" class="map"></div>

4. Include this method and run it when initialize (add method to ngOnInit())

public initializeMap() {
    let _map = document.getElementById('google_map');

    let lat = YOUR_INITIAL_LATITUDE;
    let lng = YOUR_INITIAL_LONGITUDE;

    let pos = new google.maps.LatLng(lat, lng);

    let map = new google.maps.Map(_map, {
      center: pos,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

 }

Note that you may need to install google typing.

npm install --save @types/googlemaps