I am trying to get Google Static map in my to react native app. I am passing my device longitude and latitude coordinates to fetch Google static map but it's not working also I am not getting an error.

My Component:

const MapPreview = (props) => {
  console.log(props.location.lat, props.location.lng);
  let imagePreviewUrl;

  if (props.location) {
    imagePreviewUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${props.location.lat},${props.location.lng}&zoom=14&size=400x200&maptype=roadmap&markers=color:red%7Clabel:A%7C${props.location.lat},${props.location.lng}&key=${googleApiKey}`;
  }

  console.log("imagePreviewUrl:", imagePreviewUrl);

//I am getting blank image

  return (
    <View style={{ ...styles.mapPreview, ...props.style }}>
      {imagePreviewUrl ? (
        <Image style={styles.mapImage} source={{ uri: imagePreviewUrl }} />
      ) : (
        <Text>No location chosen yet!</Text>
      )}
    </View>
  );
};

Console.log :

28.685230020925783 77.37215286121457

Also, I tried to fetch the same map which Google maps documentation showed as a demo but that's also not working.

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
&markers=color:red%7Clabel:C%7C40.718217,-73.998284
&key=*********

Maps Static API image

I have also checked my image component by passing the sample URL of an image and it's working.

What I am doing wrong? How can I make it work?