Simple Google Map Integration with Angular.

app.component.ts

import { Component } from '@angular/core';
import { MapService } from './services/gmap.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    MapService
  ],
})
export class AppComponent {
  title = 'nggmaps';

  geoLoc = { lat: 22.428912, lng: 79.394400 };

  constructor(private mapService: MapService) {
  };

  ngOnInit() {
    this._loadMapScript();
  }

  _loadMapScript() {
    this.mapService.load('googlemaps').then(() => {
      this._initializeMap();
    }).catch(error => { console.log(error); console.log('Inside err') });
  }

  _initializeMap() {
    let w: any = window;
    let gmap = w.google.maps;
    let map;
    let location = this.geoLoc;

    map = new gmap.Map(document.getElementById("map"), {
      center: location,
      zoom: 6,
      mapTypeControl: false,
      fullscreenControl: false,
      mapTypeId: 'roadmap',
      styles: [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#242f3e"
            }
          ]
        },
        {
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#746855"
            }
          ]
        },
        {
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "color": "#242f3e"
            }
          ]
        },
        {
          "featureType": "administrative.locality",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#d59563"
            }
          ]
        },
        {
          "featureType": "poi",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#d59563"
            }
          ]
        },
        {
          "featureType": "poi.park",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#263c3f"
            }
          ]
        },
        {
          "featureType": "poi.park",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#6b9a76"
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#38414e"
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "geometry.stroke",
          "stylers": [
            {
              "color": "#212a37"
            }
          ]
        },
        {
          "featureType": "road",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#9ca5b3"
            }
          ]
        },
        {
          "featureType": "road.highway",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#746855"
            }
          ]
        },
        {
          "featureType": "road.highway",
          "elementType": "geometry.stroke",
          "stylers": [
            {
              "color": "#1f2835"
            }
          ]
        },
        {
          "featureType": "road.highway",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#f3d19c"
            }
          ]
        },
        {
          "featureType": "transit",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#2f3948"
            }
          ]
        },
        {
          "featureType": "transit.station",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#d59563"
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#17263c"
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#515c6d"
            }
          ]
        },
        {
          "featureType": "water",
          "elementType": "labels.text.stroke",
          "stylers": [
            {
              "color": "#17263c"
            }
          ]
        }
      ]
    });
    var marker = new gmap.Marker({ position: location, map: map });
  }

}

gmap.component.html

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

<div id="loc_details">
  <h4>Current Location</h4>
  <p>
    Lat : {{geoLoc.lat }}
  </p>
  <p>
    Long : {{geoLoc.lng}}
  </p>
</div>

gmap.service.ts

import { Injectable } from '@angular/core';

interface Scripts {
  name: string,
  src: string
}

export const Scriptsrc: Scripts[] = [
  { name: 'googlemaps', src: 'https://maps.googleapis.com/maps/api/js?key=<YOUR_GOOGLE_MAP_KEY_GOES_HERE>' }
]
declare var document: any;

@Injectable()
export class MapService {

  private Scripts: any = {};

  constructor() {

    Scriptsrc.forEach((script: any) => {
      this.Scripts[script.name] = {
        loaded: false,
        src: script.src
      };
    });
  }

  load(...Scripts: string[]) {
    const promises: any[] = [];
    Scripts.forEach((script) => promises.push(this.loadScript(script)));
    return Promise.all(promises);
  }

  loadScript(name: string) {
    return new Promise((resolve, reject) => {
      if (!this.Scripts[name].loaded) {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.Scripts[name].src;

        if (script.readyState) {
          script.onreadystatechange = () => {
            if (script.readyState === "loaded" || script.readyState === "complete") {
              script.onreadystatechange = null;
              this.Scripts[name].loaded = true;
              resolve({ script: name, loaded: true, status: 'Loaded' });
            }
          };
        } else {
          script.onload = () => {
            this.Scripts[name].loaded = true;
            resolve({ script: name, loaded: true, status: 'Loaded' });
          };
        }
        script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
        document.getElementsByTagName('head')[0].appendChild(script);
      } else {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      }
    });
  }
}