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.
Related
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)
}
I Have a map marker that is centered on the current user location.
This marker has a draggable property so it it possible to drag
the marker around on the map. My questions is how can i set the current region prop
of the map onDragEnd of the maker. I basically want the user to be able to
drag the marker around and update the map region.
region={{ latitude: this.state.region.latitude, longitude: this.state.region.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
showsUserLocation={true} loadingEnabled={true} followsUserLocation={false}>
<MapView.Marker
onDragEnd={this.onRegionChange(this.state.region)}
//On region change method that gets fires ondragEnd of the marker
onRegionChange=(region) => {
this.setState({region
});
console.log(this.state.region)
}
I'm using react-native-maps and I want to zoom to a specific lat lon location when i init my maps in my react native project. I heard that it is called as camera zoom but couldn't find anything that could help me with this problem. and also it must fit to all the markers on the map.
Any lead would be greatly appreciated...
Use the following code:
componentDidMount() {
var newRegion = {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
};
this.mapView.animateToRegion(newRegion, 1000);
}
MapView:
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
initialRegion={this.state.region}
zoomEnabled={true}
minZoomLevel={10}
ref={ref => { this.mapView = ref }}>
</MapView>
By specifying latitudeDelta , longitudeDelta and marker array, you can zoom in. see props of react native maps for more information.