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)
}
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>
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'm using React-Native-Maps with ReactNative to develop IOS app . It contains some maps , I want to use china tianditu as the basemap. I found that there is a UrlTile api in React-Native-Maps, I try to give it a urlTemplate ,but it seems doesn't work .
Here is the code :
<UrlTile urlTemplate='http://t{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}' maximumZ={19} />
<MapView
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
You have to set latitude & longitude of "tianditu". It will focus on your initial region and show when you open map.
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