I have a google maps searchbar but when I try to search for something it only shows "No...

I am trying to add a google maps page in my ionic app it all works well but when I try to search for example "Los Angeles" the error shows up I have tried different places but none of them work and the error still showing up and if its possible I want if I search for example "Los" I want it to show me "Los Angeles" as a recommendation, this is my code:

como-llegar.page.html

`<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Como Llegar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-searchbar placeholder="Buscar ubicación" [debounce]="1000"
(ionInput)="onSearch($event)"></ion-searchbar>
<capacitor-google-map id="map"></capacitor-google-map>
</ion-content>`


como-llegar.page.ts

`import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MenuController } from '@ionic/angular/standalone';
import { environment } from 'src/environments/environment';
import { IonicModule} from '@ionic/angular';
import { RouterLink } from '@angular/router';

const apiKey = environment.firebaseConfig.apiKey;

@Component({
selector: 'app-como-llegar',
templateUrl: './como-llegar.page.html',
styleUrls: ['./como-llegar.page.scss'],
standalone: true,
imports: [CommonModule, FormsModule, IonicModule, RouterLink],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ComoLlegarPage {
map: GoogleMap

constructor(private menuController: MenuController) { }

ionViewDidEnter() {
this.menuController.enable(false, 'menu');
this.initMap();
}

ionViewDidLeave() {
this.menuController.enable(true, 'menu');
}

async initMap(){
this.map = await GoogleMap.create({
id: 'map',
element: document.getElementById('map'),
apiKey: apiKey,
config: {
center: {
lat: 25.77304690458579,
lng: -80.15837256854506,
},
zoom: 10,
},
})
}

async onSearch(event: any) {
const query = event.target.value;

if (query) {
const geocodeUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(query)}&key=${apiKey}`;

try {
const response = await fetch(geocodeUrl);
const data = await response.json();

if (data.status === 'OK') {
const location = data.results[0].geometry.location;
this.map.setCamera({
coordinate: {
lat: location.lat,
lng: location.lng,
},
zoom: 15,
});
} else {
console.error('No results found for the specified address.');
}
} catch (error) {
console.error('Error fetching geocode:', error);
}
}
}

}


`

Continue reading...