Google map loading issue

Ionic Framework ionic-v3
1

i want to implement find nearby location. i getting current lat lng but map is not loading

.ts

export class HomePage {

  @ViewChild('map')
  mapElement: ElementRef;

  map:any;
  latLng:any;
  markers:any;
  mapOptions:any;
  
  isKM:any=500;
  isType:any="";
 
  constructor(private ngZone: NgZone, private geolocation : Geolocation) { }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap(){

    this.geolocation.getCurrentPosition().then((position) => {

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     alert(this.latLng)
      this.mapOptions = {
        center: this.latLng,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }   
 
      this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);

    }, (err) => {
      alert('err '+err);
    });

  }
}

HTML:

ion-content padding>
  <div #map id="map"></div>
</ion-content>

index.html
<script src="http://maps.google.com/maps/api/js?key=My api here&libraries=places"></script>

please help m,e anyone.