Google Places API is not working and not displaying markers

Ionic Framework ionic-v3
1

I have tried to use many outside sources to correctly use the Google Places API and the Places Search Query to drop markers at all locations of a keyword, (like a chain restaurant name). However, the places API is not correctly working and there are no markers showing. My code is below and should work correctly.

map.html:

<ion-header>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? 
key=AIzaSyDkfJoNyJ8gtWKCgZC_rM2GJHWG5l5AZM4&libraries=places"> 
</script>
<ion-navbar>
<ion-title>
 Map
</ion-title>
</ion-navbar>
</ion-header>
<body>

map.ts:

 import { Component, ViewChild } from '@angular/core';
    import { NavController, Platform, Navbar } from 'ionic-angular';
    import { GoogleMaps, GoogleMapsEvent,
    GoogleMapOptions,
    MarkerOptions,
    Marker,
    LocationService,
    MyLocation,
    CameraPosition, LatLng } from '@ionic-native/google-maps';
    import { googlemaps } from "googlemaps";
    import { NativePageTransitions, NativeTransitionOptions } from '@ionic-   
    native/native-page-transitions';
    @Component({
    selector: 'page-map',
    templateUrl: 'map.html',
    })
    export class Map {
    @ViewChild(Navbar) navBar: Navbar;
    map: any;
    latLng:any;
    mapOptions:any;
    infowindow: any;
    service:any;

    constructor(private navCtrl: NavController, private platform: Platform,
    private nativePageTransitions: NativePageTransitions) {}

    ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
    this.navCtrl.pop({animate: true, animation: "transition", direction: "left", duration: 
    300});
    };
    }

    ionViewWillLeave() {

    let options: NativeTransitionOptions = {
    direction: 'left',
    duration: 300,
    slowdownfactor: 3,
    slidePixels: 20,
    iosdelay: 100,
    androiddelay: 150,
    fixedPixelsTop: 0,
    fixedPixelsBottom: 60
   };

 this.nativePageTransitions.slide(options)
   .then(onSuccess)
   .catch(onError);

}

  ionViewDidEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  locationClick() {
    LocationService.getMyLocation().then((myLocation: MyLocation) => {
      this.map.animateCamera({
        target: myLocation.latLng,
        zoom: 17,
        duration: 1000
      });
  });
}

  loadMap() {
    LocationService.getMyLocation().then((myLocation: MyLocation) => {
      let mapOptions: GoogleMapOptions = {
          camera: {
            target: myLocation.latLng,
            zoom: 10,
            tilt: 30
          },
          controls: {
            'compass': true,
            'myLocationButton': false,
            'myLocation': true,   // (blue dot)
            'zoom': false,
            'indoorPicker': true,
            'mapToolbar': true     // android only
          },
          preferences: {
            zoom: {
              minZoom: 10,
              maxZoom: 18
            }
          },
          building: true,
      };
      // Create a map after the view is loaded.
      // (platform is already ready in app.component.ts)

      this.map = GoogleMaps.create('map', mapOptions);
    });
    var request = {
      query: 'McDonalds',
      fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'],
    };
    this.service = new google.maps.places.PlacesService(this.map);
    this.service.findPlaceFromQuery(request, callback);

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          this.createMarker(results[i]);
        }
      }
    }
  }

  createMarker(place) {
    var placeLoc = place.geometry.location;
      this.map.addMarker({
        position: place.geometry.location,
        title: "Hello GoogleMap for Cordova!",
        animation: google.maps.Animation.DROP,
      }, function(marker) {
        marker.setMap(this.map);
        marker.showInfoWindow();
      });
  }
}

index.html:


!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, 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">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script src="http://maps.google.com/maps/api/js?key=AIzaSyDkfJoNyJ8gtWKCgZC_rM2GJHWG5l5AZM4&libraries=places"></script>
  <script src="cordova.js"></script>

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

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

</head>
<body>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBETjLLPvUrAI9CUsDLha4iPqsMU4UJpWo&libraries=places"></script>
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- 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>

</body>
</html>