Search code examples
ionic4here-apiionic5

Why is HERE Places API not working on device but on localhost?


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)


Solution

  • 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.