Google Geocode API: Fetch throws Status 400

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!

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

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 );

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

1 Like

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

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 );
1 Like

No difference