I am trying to get map view to work, when I am using the code below I can see the map at the right location but no sign to my Marker, I tried removing dark mode and giving the Marker an Image but still no result.
Maybe you can locate the problem and help me.
Thank you very much.
Using react-native with expo, testing on my IOS device.
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 32.060797,
longitude: 34.7617,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
pinColor={"#d62424"}
coordinate={{
latitude: 32.060797,
longitude: 34.7617
}}
image={require('../assets/images/icon.png')}
/>
</MapView>
Finally I found the solution, instead of using Marker just use MapView.Marker.
I hope I fixed your problem as well!
Related
I've implemented React Native Maps and I have a basic that allows me to interact with the map as expected.
I can pan North/East/South/West without a problem. But when I zoom, it doesn't update the finer details in the map like I'd expect.
My MapView is as follows:
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={initialRegion}
mapType={mapType}
onRegionChange={handleRegionChange}
onMapReady={() => {
setRegionReady(true)
}}
showsUserLocation={true}
followsUserLocation={true}
showsMyLocationButton={true}
/>
My initial region is:
const initialRegion = {
latitude: 56.55352329368351,
latitudeDelta: 10.777170227627643,
longitude: -4.6383764035999775,
longitudeDelta: 9.564308412373066,
}
Anything obvious I'm missing here?
Edit
This only seem to be an issue on simulators. Xcode/Android sims studio both show this behavior but physical devices seem to work.
I followed the instruction in the documentation for installing react-native-maps. I also tried every answer I could find online, ranging from adding: new MapsPackage(); and import com.airbnb.android.react.maps.MapsPackage; to manually linking the library.
The former stopped my emulator running, while the later didn't cause a difference.
I've tried every solution my hands can find, and still no answer. I'll be glad if someone can help me fix this.
N/B: This works perfectly on iOS, but not on android.
Below is what my code looks like:
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region={{
latitude: params.latitude,
longitude:params.longitude,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
<Marker coordinate={{ latitude:params.latitude, longitude: params.longitude }}
pinColor={colors.orange}
>
</Marker>
</MapView>
Is there a way to move the position of MyLocationButton?
I am using Mapview with some additional views on top of it. one of those views is on top of the MyLocationButton, and aesthetically I would like to keep it like that --> so I should move the MyLocationButton instead. Is there a way to do it? x
<MapView
style={styles.map}
showsMyLocationButton = {true}
showsUserLocation = {true}
provider={PROVIDER_GOOGLE}
customMapStyle={mapStyle}
initialRegion={{
latitude: this.state.mylocation.coords.latitude,
longitude: this.state.mylocation.coords.longitude,
latitudeDelta: 0.0922,//Zoom
longitudeDelta: 0.0421,//Zoom
}}>
In case it helps somebody, I found the solution to move the position of the button while the map continues to cover all the screen:
<MapView
(...)
mapPadding={{top:0, right:0, left:0, bottom:230}}>
(...)
</Mapview>
I have a React Native project and I am trying to implement MapView. I have it nested in a View tag and for some reason unknown to me, it gives me the following error: "Expected corresponding JSX closing tag for ". Here's the code...
<View>
<Mapview initialRegion={{
latitude: 40.7127753,
longitude: -73.989308,
latitudeDelta: .1,
longitudeDelta: .1
}}
region={props.userLocation}
style={styles.map}>
<MapView.Marker coordinate={props.userLocation}/>
</MapView>
</View>
Oh my god... the v in the initial MapView is not capitalized.
The problem is with the first MapView element it is supposed to be self closing. Add a / before the closing tag
Zooming in and out with Android is pretty easy and works totally fine; however, the result is pretty much different with IOS. I can not zoom the map in to align the map view like what I have in Android.
I set my deltas to:
const LATITUDE_DELTA = 0.000894375;
const LONGITUDE_DELTA = 0.000894375;
And I am using:
region: new MapView.AnimatedRegion({
latitude: 0,
longitude: 0,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}),
For both IOS and Android. Though I found this answer:
how to zoom in/out in react-native-map?
But I am not sure if AnimateToRegion and AnimatedRegion are the same thing. If not, I am not sure how to implement the AnimateToRegion.
Please advise thank you.
I am not sure about AnimatedRegion, but you can use AnimateToRegion like following:
this.refs.map.animateToRegion({
latitude: latitude,
longitude: longitude,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA},
duration)
<MapView style={{flex: 1}}
ref="map"
...
>
I found duration of 3000 suitable for my use.