I want to integrate map in my project but can't integrate


I want to integrate Google map but no error on console and my api is enable also

this is my htmL

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

this is my CSS Class

  height: 300px;
  width: 100%;

this is my map.ts File

import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
declare var google;

  selector: 'page-adduser',
  templateUrl: 'adduser.html',
export class adduserPage {
	 @ViewChild('map') mapElement: ElementRef;
  map: any;
  cartItems = [];
  Destination: any = 'jaffna';
  MyLocation: any;
  currentLong: number;
  currentLat: number;

  constructor(public navCtrl: NavController, public navParams: NavParams,public geolocation: Geolocation,private el:ElementRef) {
 ionViewDidLoad() {



  calculateAndDisplayRoute() {
    let that = this;
    let directionsService = new google.maps.DirectionsService;
    let directionsDisplay = new google.maps.DirectionsRenderer;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        that.MyLocation = new google.maps.LatLng(pos);
        console.log(position.coords.latitude, position.coords.longitude);
      }, function () {

    } else {
      // Browser doesn't support Geolocation

    const map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: that.MyLocation,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    that.map = new google.maps.Map(this.mapElement.nativeElement, map);


Index.html File

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="http://maps.google.com/maps/api/js?key=AIzaSyB4E0FGOKJCviq4yAQkWKG6928hJmrsZ8I"></script>
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
    if ('serviceWorker' in navigator) {
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));

  <link href="build/main.css" rel="stylesheet">


  <!-- Ionic's root component and where the app will load -->

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

Console Screen


Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.