Geek Answers Handbook

How to set a marker in MapView of React Native

  • I want to set a marker in MapView in React Native, but I can not find any information through official MapView docs .
  • If this is not allowed in this way, how can I use an existing reactive module like react-googlemaps in React Native?
+11
javascript reactjs google-maps react-native
source share
4 answers

You can set markers using annotations pylons.

For example:

 var markers = [ { latitude: 45.65, longitude: -78.90, title: 'Foo Place', subtitle: '1234 Foo Drive' } ]; <MapView region={...} annotations={markers} />
+24
source share

Thanks @naoufal. Finally, I can display markers on the map to respond to the native iOS.

 <View style={styles.container}> <MapView style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0, longitudeDelta: 0.0, }} > <MapView.Marker coordinate={{latitude: 37.78825, longitude: -122.4324}} title={"title"} description={"description"} /> </MapView> </View>

For map and container styles, I used the following styles:

  var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, map: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, } });

I referenced the following link: Change local IOS-Display markers on the map

+23
source share

In accordance with this question , it is not yet displayed. You also cannot use the Web-React package; React Native does not work.

Two suggestions:

  • Wait for the problem to be resolved to get the correct API.
  • Try using WebView to link to Google Map with annotation

Actually I'm not sure if # 2 is possible.

+1
source share

You can try webview for this -

 var html = '<!DOCTYPE html><html><body><div "class="google-maps" style="position:absolute; bottom:0px; overflow:hidden; height:100%; left:0px; width:100%"><iframe frameborder="0" width="100%" height="120%" style="margin-top:-30%;" scrolling="no" src="https://www.google.com/maps/embed/v1/place?key=yourKEY &q=Space+Needle,Seattle+WA" allowfullscreen> </iframe> </google-maps></body></html>'; return ( <View style={styles.container}> <WebView html={html}/> </View>

You can use markers and other parameters. Hope this helps!

-2
source share

More articles:


All Articles