I am trying to implement a location search API from HERE places-api inside an Ionic5 app. Everything works fine in localhost environment but search stops working on the device.
Question: Is there a special App-Code or -Key for the use of devices (also for testing via Android Studio)? And why is it working on localhost and not on the device by testing with android-studio?
I tried to change app-code & app-id into app-key and tried also Rest, JS and Rest-JS auth credentials but it is not working. I have no idea what to do next because there is no error at testing on the device, there is just no reaction to this API.
index.html
<script
src="https://js.api.here.com/v3/3.0/mapsjs-core.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://js.api.here.com/v3/3.0/mapsjs-service.js"
type="text/javascript"
charset="utf-8"
></script>
<script
src="https://js.api.here.com/v3/3.0/mapsjs-places.js"
type="text/javascript"
charset="UTF-8"
></script>
Search service
public async searchLocation(search): Promise<any> {
var platform = new H.service.Platform({
app_id: "my-id",
app_code: "my-code",
});
var searchParams = {
q: search,
in: "-180,-90,180,90"
};
return this.startSearch(platform, searchParams);
}
public async startSearch(platform: any, searchParams: object): Promise<any> {
return new Promise((resolve, reject) => {
var search = new H.places.Search(platform.getPlacesService());
const self = this;
search.request(
searchParams,
{},
function onResult(data: any) {
self.Result = data.results.items;
resolve(self.Result);
},
function onError(error: any) {
console.log("HERE search error", error);
reject(error);
}
);
});
}
EDIT - Error log
E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 43427 - Msg: ERROR Error: Uncaught (in promise): Error: [timeout] http://places.api.here.com/places/v1/discover/explore?xnlp=CL_JSMv3.0.17.0&app_id=--myID--&app_code=--myCode--&in=49.9949556%2C10.1767104%3Br%3D10000&size=100 request failed
Error: [timeout] http://places.api.here.com/places/v1/discover/explore?xnlp=CL_JSMv3.0.17.0&app_id=--myID--&app_code=--myCode--&in=479.9949556%2C10.1767104%3Br%3D10000&size=100 request failed
at Object.Zc (eval at <anonymous> (https://js.api.here.com/v3/3.0/mapsjs-core.js:56:36), <anonymous>:11:176)
at b (eval at <anonymous> (https://js.api.here.com/v3/3.0/mapsjs-core.js:56:36), <anonymous>:9:440)
at eval (eval at <anonymous> (https://js.api.here.com/v3/3.0/mapsjs-core.js:56:36), <anonymous>:10:43)
at ZoneDelegate.invokeTask (http://localhost/polyfills-es2015.js:3741:31)
at Object.onInvokeTask (http://localhost/vendor-es2015.js:73280:33)
at ZoneDelegate.invokeTask (http://localhost/polyfills-es2015.js:3740:60)
at Zone.runTask (http://localhost/polyfills-es2015.js:3518:47)
at invokeTask (http://localhost/polyfills-es2015.js:3815:34)
at ZoneTask.invoke (http://localhost/polyfills-es2015.js:3804:48)
FIXED:
Thanks @Raymond, i fixed the usecase with another way. Instead of my API call of my question i changed it to URL request by httpClient.
public async searchLocation(search): Promise<any> {
const BASE_NOMINATIM_URL = "nominatim.openstreetmap.org";
const DEFAULT_VIEW_BOX = "-25.0000%2C70.0000%2C50.0000%2C40.0000";
const url = `https://${BASE_NOMINATIM_URL}/search?format=json&q=${search}&${DEFAULT_VIEW_BOX}&bounded=1`;
return this.http.get(url).subscribe((ans) => {
console.log("data", ans);
});
}
I don't know why the way inside my question is not working. But the URL way works.