Estoy tratando de obtener el mapa estático de Google en mi aplicación nativa para reaccionar. Estoy pasando las coordenadas de longitud y latitud de mi dispositivo para obtener el mapa estático de Google, pero no funciona y tampoco recibo un error.

Mi componente:

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

Consola.log:

 28.685230020925783 77.37215286121457

Además, traté de obtener el mismo mapa que la documentación de Google Maps mostró como demostración, pero tampoco funcionó.

 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=*********

Imagen de la API estática de Google Maps

También verifiqué mi componente de imagen pasando la URL de muestra de una imagen y está funcionando.

¿Que estoy haciendo mal? ¿Cómo puedo hacer que funcione?