How to fetch google map API in componentDidMount?

[eyexx]

Question about Next.js

I use React.js + Next.js.

I wanna fetch google map API in this project.

However, I cannot figure out how I can fetch API data in Next.js project.

I tried to fetch in componentDidMount() because I also use Geolocation API and I need to use window object and in Next.js project, I can only access window object in componentDidMount() ( is it my stereotype?).

This is my fetching code.

fetch('https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false&latlng=35.6909389,139.6952959&key=myApiKey')
                               .then(res => {
                                   const resData = res.json();
                                   console.log(data.results[0].formatted_address)

                               })

However, this code does not work. The error message said "formatted_address is not undefined" .

So, I go back to Next.js docs and I found getInitialProps(). When I write code like this

 static async getInitialProps () {
        // if( navigator.geolocation ) {
        //
        // }
        const res = await fetch('https://maps.googleapis.com/maps/api/geocode/json?language=ja&sensor=false&latlng=35.6909389,139.6952959&key=apikey')
        const data = await res.json()

        console.log(data)
        console.log(data.results[0].formatted_address)
        return {  address: data.results[0].address_components[3].long_name }
    }

I can fetch successfully. However, I need to use longitude and latitude values from geolocation API and geolocation API need window object so I only can get these values in componentDidMount(). How I can fetch Google Map API in componentDidMount() ???

[eyexx]

it is just my mistake. Do not Care!

[ItsTommyGun]

Hey @Koshukey,
could you please clear up what the problem was and how you solved it?
Thank you, Thomas