CODEWITHSUNDEEP
androidreact-nativegoogle-mapsexpo
Muditha
Muditha

Reputation: 303

Google map is Work on emulator But not on android device in React native APP

I am developing a react native expo app which uses Google Map. Everything is OK on emulator and the map works and shows the markers. But on real device it is not showing, there is no black screen or exception!

I know about the debug and release API keys and i am sure there is nothing wrong in this part. Both debug and release version of the app tested on real device but results were the same.

app.json

"android": {
      "package": "com.example.packegename",
      "config": {
        "googleMaps": {
          "apiKey": "API_KEY"
        }
      },
      "googleServicesFile": "./google-services.json"
    }

mapView.js

const { status } = await Location.requestForegroundPermissionsAsync();
 Location.installWebGeolocationPolyfill()
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    this.setState({
                        userLat: position.coords.latitude,
                        userLong: position.coords.longitude,
                        userLatLoaded:true,

                        mapRegion: {
                            latitude: position.coords.latitude,
                            longitude: position.coords.longitude,
                            latitudeDelta: 0.1,
                            longitudeDelta: 0.1,
                        },
                    });
                    this.fetchData();

                },
                (error) => console.log('user location getting error - '+ error.message),
                { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
            );
            return Location.getCurrentPositionAsync({enableHighAccuracy: true});

        } else {
            throw new Error('Location permission not granted');
        }

Upvotes: 1

Views: 1013

Answers (1)

Hessuew
Hessuew

Reputation: 773

This might not be the answer but take out possible causes at least and also this guides you to some best practices.
What APIs you have enabled in your Google Cloud Platform according to your googleMaps.apiKey and have you restricted that API key with application restriction and API key restrictions?

On emulator Google maps uses "Maps JavaScript API" but on real device you need either "Maps SDK for Android" or "Maps SDK for iOS" enabled.
So first you need to ensure you have all the required APIs enabled and then ensure those APIs are also enabled in your API key that you use.

(It is wise to restrict API keys so they do not include every API from Google and I advice not to share them publicly to prevent any surprises)

Upvotes: 1

Related Questions