Get current location, latitude and longitude in ReactNative using react-native-maps

Question

I am developing a map location. When I click in some particular place I get the latitude and longitude, but not the current location, latitude and longitude.

I don't know how to find out.

How can I get them and how can I put the marker at that position?

Here is my code:

class Maps extends React.Component {   constructor(props) {     super(props);     this.state = {       region: {         latitude:       LATITUDE,         longitude:      LONGITUDE,         latitudeDelta:  LATITUDE_DELTA,         longitudeDelta: LONGITUDE_DELTA,       },       marker: {         latlng:{           latitude:       null,           longitude:      null,           latitudeDelta:  LATITUDE_DELTA,           longitudeDelta: LONGITUDE_DELTA         }       }     }   }    componentDidMount() {     navigator.geolocation.getCurrentPosition (       (position) => { alert("value:" + position) },       (error)    => { console.log(error) },       {         enableHighAccuracy: true,         timeout:            20000,         maximumAge:         10000       }     )   }    onMapPress(e) {     alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate))       this.setState({         marker: [{ coordinate: e.nativeEvent.coordinate }]       })     }    render() {     return (       <View style={styles.container}>         <View style={{flexGrow:1}}>           <MapView             ref="map"             provider={this.props.provider}             style={styles.map}             onPress={this.onMapPress.bind(this)}             provider = {PROVIDER_DEFAULT}             mapType="standard"             zoomEnabled={true}             pitchEnabled={true}             showsUserLocation={true}             followsUserLocation={true}             showsCompass={true}             showsBuildings={true}             showsTraffic={true}             showsIndoors={true}>           </MapView>         </View>       </View>     )   } } 

Answer 1

I did it following these steps using [email protected] and react-native-maps@^0.13.1 and using [email protected] and react-native-maps@^0.15.2 at the date:

Set a mapRegion object in the state, the last longitude and the last latitude as null:

state = {   mapRegion: null,   lastLat: null,   lastLong: null, } 

Then within your componentDidMount() function watch for each change in the current position:

  componentDidMount() {     this.watchID = navigator.geolocation.watchPosition((position) => {       ...     });   } 

When there are changes update them in your this.state.mapRegion, passing the actual coords and the delta values (mine can be different to yours, so adapt them):

  componentDidMount() {     this.watchID = navigator.geolocation.watchPosition((position) => {       // Create the object to update this.state.mapRegion through the onRegionChange function       let region = {         latitude:       position.coords.latitude,         longitude:      position.coords.longitude,         latitudeDelta:  0.00922*1.5,         longitudeDelta: 0.00421*1.5       }       this.onRegionChange(region, region.latitude, region.longitude);     }, (error)=>console.log(error));   } 

Then you need the onRegionChange() function, that's being used to "set" new values to your elements within the componentDidMount() function:

  onRegionChange(region, lastLat, lastLong) {     this.setState({       mapRegion: region,       // If there are no new values set the current ones       lastLat: lastLat || this.state.lastLat,       lastLong: lastLong || this.state.lastLong     });   } 

Unmount the geolocation on componentWillUnmount():

  componentWillUnmount() {     navigator.geolocation.clearWatch(this.watchID);   } 

And render the MapView passing your current mapRegion object, the MapView.Marker inside of it is just to show you the current latitude and longitude when they change:

  render() {     return (       <View style={{flex: 1}}>         <MapView           style={styles.map}           region={this.state.mapRegion}           showsUserLocation={true}           followUserLocation={true}           onRegionChange={this.onRegionChange.bind(this)}>           <MapView.Marker             coordinate={{               latitude: (this.state.lastLat + 0.00050) || -36.82339,               longitude: (this.state.lastLong + 0.00050) || -73.03569,             }}>             <View>               <Text style={{color: '#000'}}>                 { this.state.lastLong } / { this.state.lastLat }               </Text>             </View>           </MapView.Marker>         </MapView>       </View>     );   } 

Add the StyleSheet.absoluteFillObject for your map in order to render it properly using the whole width and height of your device.

const styles = StyleSheet.create({   map: {     ...StyleSheet.absoluteFillObject,   } }); 

So for your onPress() function you could do something similar to the onRegionChange(), that's to get the actual coordinates and to set them:

  onMapPress(e) {     let region = {       latitude:       e.nativeEvent.coordinate.latitude,       longitude:      e.nativeEvent.coordinate.longitude,       latitudeDelta:  0.00922*1.5,       longitudeDelta: 0.00421*1.5     }     this.onRegionChange(region, region.latitude, region.longitude);   } 

Check the full code on expo.io (although react-native-maps isn't installed)

Answer 2

I suggest you to read this official documentation about geolocalisation: https://facebook.github.io/react-native/docs/geolocation.html

Then, with the current location, you can put that information into your state:

navigator.geolocation.getCurrentPosition((position) => {     this.setState({position: {longitude: position.longitude, latitude: position.latitude}}); }, (error) => {     alert(JSON.stringify(error)) }, {     enableHighAccuracy: true,     timeout: 20000,     maximumAge: 1000 }); 

You will be able next, in your render method, to compose your final view with a marker:

render() {   return (     <MapView ...>       <MapView.Marker         coordinate={this.state.position}         title="title"         description="description"       />     </MapView>   ) }