Ionic native Google Maps not showing correctly

This is perfectly working
ionic map.html file

<ion-content>

<div class="map">

<ion-searchbar #searchbar placeholder="Suchen" [hidden]="!search"></ion-searchbar>

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

</div>

map.ts file

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

import { Geolocation ,GeolocationOptions ,Geoposition ,PositionError } from '@ionic-native/geolocation';

import { NavController, NavParams,Platform } from 'ionic-angular';

declare var google;

@Component({

selector: 'page-map',

templateUrl: 'map.html',

})

export class MapPage {

options : GeolocationOptions;

currentPos : Geoposition;

@ViewChild('map') mapElement: ElementRef;

map: any;

status:any;

isActive:any;

alertmsg:any;

alertcondition:any;

data:any = {};

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

}

ionViewDidLoad() {

console.log('ionViewDidLoad MapPage');

this.mapload();

}

/*##Get user location map starts##*/

mapload(){

// this.loadMap(13.08648395538330,80.27350616455078 );

this.options = {

enableHighAccuracy : true

};

this.geolocation.getCurrentPosition(this.options).then((pos : Geoposition) => {

this.currentPos = pos;

console.log(pos);

console.log(pos.coords.latitude+','+pos.coords.longitude)

//this.addMap(pos.coords.latitude,pos.coords.longitude);

this.loadMap(pos.coords.latitude,pos.coords.longitude);

},(err : PositionError)=>{

console.log("error : " + err.message);

});

}

}

loadMap(lat,long){

let latLng= new google.maps.LatLng(lat, long);

let mapOptions={

center:latLng,

radius:300,

strokeColor:'#AA00FF',

strokeWidth: 5,

fillColor : '#880000',

zoom:15,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

this.map=new google.maps.Map(this.mapElement.nativeElement,mapOptions);

}

hide() {

}

}

Result