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
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 am developing an app that involves tracking another user on the user's phone. I am trying to update a marker location and display it on my user's phone. The problem is that every time I update the marker location the entire map reloads to the initial user's coordinates. How can I only rerender the marker instead of the entire map?
<View style = {styles.container}>
{!this.state.ready &&(
<ActivityIndicator size='large' color="#0000ff"/>
)}
{this.state.ready &&(
<MapView style={styles.map} region={{
latitude: this.state.where.lat,
longitude: this.state.where.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421 }}
showsUserLocation={true}>
{this.state.friendMarkers &&(
<MapView.Marker
coordinate={this.state.friendMarkers[0].coordinates}
title={this.state.friendMarkers[0].title}/>
)}
</MapView>
)}
</View>
Use RNLocation or Geolocation react-native package to get real-time user live location. These packages will update the user's live location without re-rendering the whole screen.
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 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!
I have a problem when using MapView in expo on a project. In expo app everything is ok on both iOS and Android, but when building and publishing the same app to Android apk, no matter if on play store or note when opening the map the app crashes and reloads.
I am using:
expo 37.0.0
react-native expo sdk 37.0.1
react-native-maps 0.27.1
Here is the code:
import { PROVIDER_GOOGLE } from 'expo';
import MapView, { Marker, Callout, CalloutSubview } from 'react-native-maps';
<MapView
ref={'map'}
onPress={() => this._mapPress()}
provider={PROVIDER_GOOGLE}
style={styles.mapView}
initialRegion={{
latitude: mapLat,
longitude: mapLon,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
>
{markers.map((marker, i) => (
<Marker
key={`marker-${i}`}
coordinate={marker.latlng}
stopPropagation={true}
onPress={e => this._mapMarkerPress(marker)}
>
<Image
resizeMode='cover'
source={
JSON.stringify(this.state.selectedMarker) == JSON.stringify(marker)
? ACTIVE_PIN
: INACTIVE_PIN
}
style={styles.mapMarker}
/>
</Marker>
))}
</MapView>
At first I thought there is a problem with the markers array or with the initial lat long, but removing parts of code i reduced the MapView to this:
<MapView
ref={'map'}
provider={PROVIDER_GOOGLE}
>
</MapView>
And still not working on apk / live Android, but in ios live works just fine, showing an empty map.
But in expo app both ios and android everything is fine with or without the markers.
Anyone had this problem?
Thanks!
Found the problem and solved it. The api key from google cloud console was only for web. I made it for ios and android too and problem solved. :)
However this is weird, because in expo development the issue was not present... Only in the build for live.
First add
"config": {
"googleMaps": {
"apiKey": "YOUR_API"
}
},
on your app.json, below "android".
Then you need to checked your api in your Google Developer Console and make sure
you checked - Application restrictions.
add Package name (after you did expo buil:android, go to the app.json and copy your package . ex: "com.name.nameofapp" )
add your SHA-1 certificate- For that you need to Run expo credentials:manager (its look like AD:GR:55:SV:54:VS:45:TE:98)
In Api restrictions , check Maps SDK for Android
Save and it's work !
Try to add markerLat a markerLon parameters and replace this:
initialRegion={{
latitude: mapLat,
longitude: mapLon,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
with this:
initialRegion={{
latitude: mapLat,
longitude: mapLon,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
},
markerLat: Number(48.736279),
markerLon: Number(19.146191)
}