I try to create a MapView, but when I enter the page containing it I get an error.
<View>
<MapView style={{ flex: 1, height: 500 }}
zoomEnabled={false}
scrollEnabled={false}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
title={'title'}
description={'description'}
/>
</MapView>
</View>
Related
I have been working with google maps on a react native project. The map was woking yesterday but now it just shows a beige screen with the logo at the bottom. I have seen a few people have had this problem but I cant really fine a solution.
Can anyone please help???
This is my return of my component:
<>
<View style={tw`z-50 `}>
<MapSearchbar searchPosition={setSearchPosition} />
</View>
{showMap ? (
<MapView
provider={PROVIDER_GOOGLE}
ref={mapRef}
style={{ width: '100%', height: '100%', position: 'absolute', zIndex: 1 }}
initialRegion={{
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.092,
longitudeDelta: 0.0421,
}}
onRegionChangeComplete={onRegionChangeComplete}
>
</MapView>
) : (
<></>
)}
</>
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps"
const Location = (props)=>{
const { states } = useContext(Context)
const place = states.place
return(
<ImageBackground
style={{flex:1}}
source={require('../../img/mypoint-wallpaper.jpg')}>
<View style={styles.container}>
<MapView style={{
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}}
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
initialRegion={{
latitude: place && place.latitude,
longitude: place && place.longitude,
longitudeDelta: 0.01,
latitudeDelta: 0.01
}}>
{
(place.latitude && place.longitude) ?
<Marker
title={place.nome}
coordinate={{
latitude: place.latitude,
longitude: place.longitude
}}/>
: null
}
</MapView>
</View>
</ImageBackground>
)
}
I have a map of markers that renders each marker in an array of coordinates. I am trying to render markers conditionally based on a key I give the marker. You can see exactly how I am trying to do this by looking at my snack example here or I have posted the code below.
Thank you, I appreciate it more than you know.
export default class Map extends React.Component {
markers = [];
state = {
coordinates: [
{
name: '1',
latitude: 36.212111515965525,
longitude: -81.67527588876025,
status: 'busy',
},
{
name: '2',
latitude: 36.21754431261142,
longitude: -81.68598350040361,
status: 'open',
},
{
name: '3',
latitude: 36.21744712906634,
longitude: -81.68168562889075,
status: 'busy',
},
{
name: '4',
latitude: 36.219352000280495,
longitude: -81.68559146421954,
status: 'open',
},
],
};
render() {
return (
<View style={{ ...StyleSheet.absoluteFillObject }}>
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
ref={(map) => (this._map = map)}
initialRegion={{
latitude: 36.212111515965525,
longitude: -81.67527588876025,
latitudeDelta: 0.05,
longitudeDelta: 0.05
}}>
{this.state.coordinates.map((marker, index) => (
if(marker.status == 'busy'){
<Marker
key={marker.name}
ref={(ref) => {this.markers[index] = ref;}}
onPress={() => this.onMarkerPress(marker, index)}
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}>
<Image
source={require('./assets/blueMarker.png')}
style={{ height: scale(50), width: scale(50) }}
/>
</Marker>
} else {
<Marker
key={marker.name}
ref={(ref) => {this.markers[index] = ref;}}
onPress={() => this.onMarkerPress(marker, index)}
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}>
</Marker>
}
))}
</MapView>
</View>
);
}
}
You're not using correct JSX syntax. You can't use if-then-else, use ternary operator instead.
{ this.state.coordinates.map((marker, index) => (
marker.status == 'busy' ?
<Marker
key={marker.name}
ref={(ref) => {this.markers[index] = ref;}}
onPress={() => this.onMarkerPress(marker, index)}
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}>
<Image
source={require('./assets/blueMarker.png')}
style={{ height: scale(50), width: scale(50) }}
/>
</Marker>
:
<Marker
key={marker.name}
ref={(ref) => {this.markers[index] = ref;}}
onPress={() => this.onMarkerPress(marker, index)}
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}>
</Marker>
))}
Here, In JSX we are allowed to render components only.
If We have to render something conditionally, we can use ternary operators for that.
Here I can see in the code that you have used If...Else...
Solution for your code:
{
this.state.coordinates.map((marker, index) => (
marker.status == 'busy'
?
<Marker
key={marker.name}
ref={(ref) => {this.markers[index] = ref;}}
onPress={() => this.onMarkerPress(marker, index)}
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}>
<Image
source={require('./assets/blueMarker.png')}
style={{ height: scale(50), width: scale(50) }}
/>
</Marker>
:
<Marker
key={marker.name}
ref={(ref) => {this.markers[index] = ref;}}
onPress={() => this.onMarkerPress(marker, index)}
coordinate={{
latitude: marker.latitude,
longitude: marker.longitude,
}}>
</Marker>
))
}
I am using react-native-maps on android. I put a custom button clicking on which should go to supplied coordinates (my current location)
<MapView
ref={(map) => { this.map = map; }}
provider={PROVIDER_GOOGLE}
style={{ height: '100%', width: '100%' }}
annotations={markers}
showsUserLocation={true}
showsMyLocationButton={true}
initialRegion={this.state.region}
onRegionChangeComplete={this.onRegionChange}
>
my button -
<TouchableOpacity onPress={this.gotToMyLocation} style={[Style.alignJustifyCenter, {
width: 60, height: 60,
position: "absolute", bottom: 20, right: 20, borderRadius: 30, backgroundColor: "#d2d2d2"
}]}>
<Image
style={{ width: 40, height: 40 }}
source={Images.myLocation}
/>
</TouchableOpacity>
gotToMyLocation method -
gotToMyLocation(){
console.log('gotToMyLocation is called')
navigator.geolocation.getCurrentPosition(
({ coords }) => {
console.log("curent location: ", coords)
console.log(this.map);
if (this.map) {
console.log("curent location: ", coords)
this.map.animateToRegion({
latitude: coords.latitude,
longitude: coords.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005
})
}
},
(error) => alert('Error: Are location services on?'),
{ enableHighAccuracy: true }
)
}
console.log(this.map) always shows undefined.
I want to move map to my current location when clicking the button.
Default my location button
showsUserLocation={true}
showsMyLocationButton={true}
Example:
<MapView
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={{
...StyleSheet.absoluteFillObject,
width: '100%',
}}
initialRegion={{
latitude: targetLocation.latitude,
longitude: targetLocation.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
A custom button
<MaterialIcons
style={style.myLocationIcon}
name="my-location"
onPress={() => {
dispatch(settingActions.getLocation());
mapRef.current.animateToRegion({
latitude: myLatitude,
longitude: myLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
}}
/>
For this you need to define mapRef
export const mapRef = React.createRef();
return(
<MapView
ref={mapRef}
Animation
mapRef.current.animateToRegion({ will take care of animation while you switch from one location to another.
Actually i found out a silly mistake where binding the method would make it work. may be useful to someone.
this.gotToMyLocation = this.gotToMyLocation.bind(this);
move your function gotToMyLocation:
if Using Class - in class before render()
or
if using function - use function gotToMyLocation(){...} and don't use this
everyone. I am building a react native app about showing a different location in Map Views depends on selected picker.
I was thinking to used conditional statement by detecting words contain in the string, I use string-contains library to detect some words in a string. Here is the example of my code:
export default class App extends React.Component {
renderMap(){
if(contains(this.state.name, "Branch 1")){
return <MapView
initialRegion={{
latitude: 53.433980,
longitude: -2.950960,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
} else if(contains(this.state.name, "Branch 2")){
return <MapView
initialRegion={{
latitude: 51.491610,
longitude: -0.135560,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
}
else if(contains(this.state.name, "Branch 3")){
return <MapView
initialRegion={{
latitude: 53.461220,
longitude: -2.269540,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
}
else if(contains(this.state.name, "Branch 4")){
return <MapView
initialRegion={{
latitude: 51.262290,
longitude: -1.081610,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
}
}
render(){
const branchesPicker = this.state.branches.map((item, branch_id)=> {
return(
<Picker.Item
label={item.name}
value={item.address}
key={item.branch_id}/>
)
});
this.renderMap();
return(
<View style={styles.container}>
<Picker
selectedValue={this.state.name}
mode="dropdown"
style={{ height: 50, justifyContent: 'center', flex:4, alignItems: 'stretch', }}
onValueChange={(item)=> this.setState({name: item})}>
{branchesPicker}
</Picker>
{this.renderMap()}
</View>
When I run this code, the picker is working fine but when I tried to change the picker, the map is not changing as I supposed. It's only showing a static one map view (but the map view is not always from branch 1, sometimes it's showing branch 2 or 3 when I reload it. But the point is, it's not changing..)
fyi, this.state.name is showing the branch's name of selected picker.
Thank you so much for your help! It really means a lot..
Assume you are using react-native-maps.
Initial region is used to render and show the location when the map is loaded for the 1st time. When or if you want to change the location after the loading, You can use animateToRegion or many other similar methods. So when you want to change the location on the map when something is picked in picker, just call these methods with your inputs.
here is it snippet of code for reference.
this.map.animateToRegion({ latitude: region.latitude, longitude: region.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta }, timeToChangeRegionInMilliSeconds);