Google Maps showing blank


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';

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

  constructor() {

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

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

  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.