Following is my code segment. Please refer to MapView.Marker, even on giving the coordinates for my current location nothing is displayed, same behavior is observed when i map service locations array and provide latitude,longitude values using it.
When i use mapview marker like this , a single marker is displayed but as for this component i have to display multiple markers on the map with different coordinates i have to go with Mapview.Marker. Please point out what am i missing here.
export default class index extends Component {
constructor(props) {
super(props);
this.state = {
text: "",
source: require("../../Image/User_default.png"),
location: {
latitude: 0,
latitudeDelta: 0,
longitude: 0,
longitudeDelta: 0,
},
serviceLocations: [],
};
}
componentDidMount() {
this._getLocationAsync();
this._getServices();
}
_getServices = () => {
create_service
.getAllServices()
.then((res) => {
this.setState({
serviceLocations: res,
});
})
.catch((error) => {
console.log(error);
});
};
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== "granted") {
Alert.alert("Error", "Permission to access location was denied", [
{ text: "OK" },
]);
} else {
let location = await Location.getCurrentPositionAsync({});
location_service
.setCurrentUserLocation(location)
.then(async (res) => {
// console.log("_getLocationAsync:", res);
})
.catch((err) => console.log(err));
}
};
render() {
const { serviceLocations } = this.state;
return (
<View style={style.container}>
<MapView
style={style.mapStyle}
provider={PROVIDER_GOOGLE}
region={{
latitude: 33.650073,
longitude: 73.153164,
latitudeDelta: 0.0921,
longitudeDelta: 0.0421,
}}
showsUserLocation={true}
/>
<Marker/>
{serviceLocations.length
? serviceLocations.map((serviceLocation,key) => {
return (
<MapView.Marker
coordinate={{
latitude: 33.650073,
longitude: 73.153164,
}}
key={key}
// image={require("../../Image/location-pin.png")}
/>
);
})
: null}
</View>
);
}
}