Use Google Places Library to show all location markers for a predetermined keyword with Google Maps and Ionic

I want to display a marker for each Place search result on my map but it doesn't work.
---EDIT---
I have tried to debug figure out what I am missing and why the markers are not showing up, but I am not able to figure it out. Even if the answer is very obvious, I might not be able to see it with what I currently have. I had edited the code a little bit with the setMarker() function and the options of the marker to be displayed on the map created, but that does not seem to be the answer to why the markers wont show up. I shouldn't have to create markers at specific Latitudes and Longitudes but instead search the area around the current location using a predetermined search keyword which in this case would be "McDonalds" (this search keyword is being used for testing).
map.html:

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

<ion-content>
  <div id="map_canvas"></div>
</ion-content> 

map.ts:

@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class map {
  @ViewChild(Navbar) navBar: Navbar;
  map: any;
  latLng:any;
  markers:any;
  mapOptions:any;
  isKM:any=500;
  isType:any="";
  service:any;

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

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

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

  loadMap() {
    LocationService.getMyLocation().then((myLocation: MyLocation) => {
      let mapOptions: GoogleMapOptions = {
          camera: {
            target: myLocation.latLng,
            zoom: 10,
            tilt: 30
          },
          controls: {
            'compass': true,
            'myLocationButton': true,
            'myLocation': true,   // (blue dot)
            'zoom': true,
            '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_canvas', 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++) {
          var place = results[i];
          var marker = new google.maps.Marker({
            position: results[i],
            map: this.map,
            title:"McDonalds"
          });
          marker.setMap(this.map);
        }
      }
    }
  }
}

from Use Google Places Library to show all location markers for a predetermined keyword with Google Maps and Ionic