Places API not working with ionic framework


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.


import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, Navbar } from 'ionic-angular';
import { GoogleMaps, GoogleMapsEvent,
    CameraPosition, LatLng } from '@ionic-native/google-maps';
//import { googlemaps } from "googlemaps";
declare var google;
  selector: 'page-map',
  templateUrl: 'map.html',
export class OfficeLocatorPage {
  @ViewChild(Navbar) navBar: Navbar;
  map: 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(() => {

  locationClick() {
    LocationService.getMyLocation().then((myLocation: MyLocation) => {{
        target: myLocation.latLng,
        duration: 1000

  compassClick() {{
            tilt: 0,
            bearing: 0,
            duration: 1000

  trafficClick() {
    this.isEnabled = !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,
       }; = 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.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;
              position: placeLoc.geometry.location,
              title: "McDonalds",
              animation: 'DROP',
              icon: 'red'


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