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=*********
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?
Juan Pablo Isaza