Google Geocode API: Fetch throws Status 400

Ask the community
,
1

I try to get some data from google maps to determine the country and county from an address.

I do this with a request to the google geocode API by sending an URL that contains the address.

I expect a JSON object.

This is the backend code that is saved in a file called gapi.jsw:

import { fetch } from ‘wix-fetch’ ;
import { getSecret } from ‘wix-secrets-backend’ ;

export async function county ( val ) {
const key = await getSecret ( “googleApiKey” );
const input = val . plz + “%20” + val . ort ;
const url = ‘https://maps.googleapis.com/maps/api/geocode/json?address=’ + input + ‘&types=(cities)&key=’ + key ;
console . log ( "url: " + url );

//This URL in the browser returns a perfect JSON object with “status:ok”

**return**  fetch  ( url , { method :  'get' }). then ( ( httpResponse ) => { 
    console . log ( "MY httpResponse status: " + httpResponse . status );

//THROWS 400

    console . log ( "httpResponse.json():  " + httpResponse . json ());

//THROWS (object Promise)
if ( httpResponse . ok ) {
console . log ( “OK” );
return httpResponse . json ();
}
})
}

As mentioned: When I enter the transmitted URL into the browser I get a perfect JSON object.

So I assume my problem has to do with the fetch function.
Anybody an idea what is going wrong?

Thanks!

2

If you hardcode the url in your fetch function, does it return as expected?

3

Ok, I figured it out: fetch does not like Umlaute (ö,ä,ü). If I enter “Zürich” as a place it returns an error, if I enter “Zurich” then it works.
For german speakers: “Zuerich” also works…
Thats quite bad… of course I can edit the string to replace the Umlauts.

Solution:
let myStringWithoutUmlauts = encodeURI ( myStringWithUmlauts );

4

Ah yes! I didn’t think of that, it does make sense it would need the encoding. I’m glad you figured it out.

5

can you please share your front end code, how you handled returned promise

6

Here is how I call the function conuty:

setTimeout (() => {
let val = newUo ;
let myCounty ;
let myCountry ;
county ( val ). then ( function ( resp ) {
let myBreakerCounty = false ;
let myBreakerCountry = false ;
for ( let i = 0 ; i < resp . results [ 0 ]. address_components . length ; i ++) {
for ( let index = 0 ; index < resp . results [ 0 ]. address_components [ i ]. types . length ; index ++) {
if ( resp . results [ 0 ]. address_components [ i ]. types [ index ] === “administrative_area_level_1” ) {
myCounty = resp . results [ 0 ]. address_components [ i ]. short_name ;
myBreakerCounty = true ;
}
if ( resp . results [ 0 ]. address_components [ i ]. types [ index ] === “country” ) {
myCountry = resp . results [ 0 ]. address_components [ i ]. short_name ;
myBreakerCountry = true ;
}
if ( myBreakerCounty === true && myBreakerCountry === true ) {
break ;
}
}

            **if** ( myBreakerCounty  ===  **true**  &&  myBreakerCountry  ===  **true** ) { 
                **break** ; 
            } 
        
            
        } 
        newUo . county  =  myCounty ; 
        newUo . country  =  myCountry ; 
        **let**  address  =  resp . results [ 0 ]. formatted_address ; 
        itemData  =  newUo ; 

        //WRITE NEW VALUES TO DB 
        
        wixData . save ( "unterrichtsort" ,  itemData ) 
            //etc. ........... 
    
    
},  10 );
7

No difference