Places API not working with ionic framework

Ionic Framework ionic-v3
1

I need the Google Places API to work with my code so that I can use a name of a place and search for all locations near the current location of the phone. I have found that the markers are working correctly but I don’t think the api is being accessed correctly or called correctly from the code I found from Google documentation. I know that the callback function is not being called because a marker is not being created but has been created before the function call if I move and paste the marker code before the function. Here is my code, I will post more if I need to, but I don’t know why the API is not working. I have the script with I believe is the correct API key in my index.html file. I am using McDonalds to test the keyword query search.

map.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, Navbar } from 'ionic-angular';
import { GoogleMaps, GoogleMapsEvent,
    GoogleMapOptions,
    MarkerOptions,
    Marker,
    LocationService,
    MyLocation,
    MyLocationOptions,
    CameraPosition, LatLng } from '@ionic-native/google-maps';
//import { googlemaps } from "googlemaps";
declare var google;
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class OfficeLocatorPage {
  @ViewChild(Navbar) navBar: Navbar;
  map: any;
  latLng:any;
  mapOptions:any;
  infowindow: any;
  isEnabled: boolean = false;
  service: any;

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

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

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

  compassClick() {
        this.map.animateCamera({
            target: this.map.getCameraTarget(),
            tilt: 0,
            bearing: 0,
            duration: 1000
          });
  }

  trafficClick() {
    this.isEnabled = !this.isEnabled;
    this.map.setTrafficEnabled(this.isEnabled);
    document.getElementById("traffic-button").style.color = "blue";
  }
  loadMap() {
    LocationService.getMyLocation().then((myLocation: MyLocation) => {
    let mapOptions: GoogleMapOptions = {
      camera: {
         target: myLocation.latLng,
         zoom: 10,
         tilt: 0
       },
         controls: {
           compass: false,
           myLocationButton: false,
           myLocation: true,   // (blue dot)
           zoom: false,
           indoorPicker: true,
           mapToolbar: true     // android only
         },
         preferences: {
           zoom: {
             minZoom: 10,
             maxZoom: 18
           }
         },
         building: true,
       };

    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++) {
          var placeLoc = results[i].geometry.location;
            this.map.addMarkerSync({
              position: placeLoc.geometry.location,
              title: "McDonalds",
              animation: 'DROP',
              icon: 'red'
            });
        }
      }
    }
  });
}
}
2

That’s because you are sending a GoogleMap as parameter in the PlacesService constructor, you need to create a new map using javascript library, I did this way:

const browserMap = new google.maps.Map(document.createElement('div'), {
            center: { lat: SOME_LAT_HERE, lng: SOME_LNG_HERE },
            zoom: 15
        });

const service = new google.maps.places.PlacesService(browserMap);

// TODO add your desired code here