Google Maps showing blank

Ionic Framework
1

Hi,

I am new to ionic. I have created a project and tried to use Google Maps Javascript API. When I comppile my app and run it in Chrome browser, there is not error but map is not getting displayed. The code is as follows:

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

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {
  myMap: any;
  @ViewChild('map', {static: false}) mapelement: any;

  constructor() {
   }

  ngOnInit() {
    // this.initMap();
  }

  ionViewDidEnter() {
    console.log('View did load initiated......');
    this.initMap();
  }

  initMap() {
    let coords = new google.maps.LatLng(51.6520, 0.7666);
    let mapOptions: google.maps.MapOptions = {
      center: {lat: 51.6520, lng: 0.7666},
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 14
    };

    this.myMap = new google.maps.Map(this.mapelement.nativeElement, mapOptions);
    let marker: google.maps.Marker = new google.maps.Marker({
      map: this.myMap,
      position: {lat: 51.6520, lng: 0.7666}
    });
  }
}

In index.html, I have added the Script code with maps API key. I tried to use debugger but there is no error, still map is not visible.

Regards.