I am building an IOS application using ReactNative. My app needs to display the location (a marker) on the Apple Map view. I am using React Native map View. I can display the map. But it is not displaying the marker.
This is my code.
<SafeAreaView style={{flex: 1}}>
<MapView
style={{ flex: 1 }}
region={{
"latitude": 37.785834, "longitude": -122.406417,
latitudeDelta: 0.009,
longitudeDelta: 0.009
}}
/>
<Marker title={"Test"} key={1} coordinate={{ "latitude": 37.785834, "longitude": -122.406417 }} />
</SafeAreaView>
It displays the map. It is not displaying the marker on the map. How can I fix it?
Marker should be inside the MapView not outside.
Here is the sample:
import React from "react";
import { Dimensions, View } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
export default function App() {
return (
<View style={{ flex: 1, alignItems: "center" }}>
<MapView
style={{
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
}}
provider={PROVIDER_GOOGLE}
>
<Marker coordinate={{ latitude: 45, longitude: 8 }} />
</MapView>
</View>
);
}
Related
As of 2022, does React Native Maps still free, or does go under any list of Google pricing?
I read this line on Reddit but it's 2 years ago
"Embedding Google Maps through react-native-maps does require an API key, but it is at no cost. Can confirm as I have an app at 100K users and haven't paid a dime for maps."
I am not sure if it is still the same.
This is my way of using it:
import { StyleSheet, Text, View, Button } from "react-native";
import MapView, {
PROVIDER_GOOGLE,
MAP_TYPES,
PROVIDER_DEFAULT,
UrlTile,
Marker,
} from "react-native-maps";
import React, { useEffect } from "react";
export default function Home({ navigation }) {
let location = {
latitude: 30.259933,
longitude: 31.412613,
latitudeDelta: 0.009,
longitudeDelta: 0.009,
};
return (
<View style={styles.container}>
<View style={styles.myMap}>
<MapView
style={{ flex: 1 }}
showsUserLocation
PROVIDER_GOOGLE
MAP_TYPES="STANDARD"
>
<Marker
title="Home"
coordinate={{
latitude: location.latitude,
longitude: location.longitude,
}}
/>
</MapView>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#ffd",
alignItems: "center",
justifyContent: "center",
},
myMap: {
flex: 2,
backgroundColor: "white",
width: "100%",
marginTop: 30,
marginBottom: 30,
},
map: {
width: "100%",
height: "100%",
},
});
I need some clarification
See https://developers.google.com/maps/documentation/android-sdk/usage-and-billing#dynamic-maps
If you use a Map ID you will be charged. (This is new functionality)
i have screen with 2 tabs
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Main" component={Main}/>
<Tab.Screen name="Chat" component={Chat}/>
</Tab.Navigator>
</NavigationContainer>
Screen Chat very simple and it works :
const Chat = () => {
return (
<View>
<Text>Chat</Text>
</View>
);
};
export default Chat;
But in first screen Main i have nested screen Map
const Main = () => {
return (
<Map/>
);
};
export default Main;
Tell me pls how nested screens works, because i have an error :
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app
Component Map:
export const Map = () => {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={styles.map}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
<Marker
title="title"
description='descr'
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}>
<View style={{backgroundColor: "red", padding: 10}}>
<Text>SF</Text>
</View>
</Marker>
</MapView>
</View>
);
};
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: '100%',
width: '100%',
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
problem was in wrong import MapView!
I use react-native-maps to display an array of positions using custom marker. I want to overlay the selected maker, but did not found the right solution. Using position: 'absolute' for the selected marker changes its position in the map.
Here is the code of the MapView:
<MapView
style={styles.map}
region={region} // initial region is user location if myPosition or coordinates of search
// onRegionChange={onRegionChange}
>
<View style={{position: 'absolute'}}>
{data.map((item) => (
<Marker
onPress={() => handleMarkerPress(item)}
coordinate={{
latitude: item.latitude,
longitude: item.longitude,
}}
// image={require('Resources/geoloc.png')}
// pinColor={item.id === visibleItemId ? 'red' : 'blue'}
key={item.id}>
<MosqueMarquer
mosqueImage={item.images}
itemId={item.id}
visibleItemId={visibleItemId}
distance={item.distance_result}
/>
</Marker>
))}
{isUserGeoLoc ? (
<Marker
coordinate={{
latitude: userLocation.latitude,
longitude: userLocation.longitude,
}}
description={'Your are here'}>
<Image
resizeMode="contain"
source={require('Resources/user_location.png')}
style={{tintColor: '#4280ee', height: 25}}
/>
</Marker>
) : null}
</View>
</MapView>
And here is the custom marker code:
const MosqueMarquer = (props) => {
const relativeStyle =
props.itemId == props.visibleItemId
? {position: 'absolute', tintColor: '#428947', color: '#fff', zIndex: 1}
: {position: null, tintColor: '#fff', color: '#3c423d', zIndex: 0};
return (
<ImageBackground
resizeMode="contain"
source={require('Resources/square_marker.png')}
style={{
...styles.imageBackground,
position: relativeStyle.position,
zIndex: relativeStyle.zIndex,
}}
imageStyle={{tintColor: relativeStyle.tintColor}}>
<Text style={{...styles.text, color: relativeStyle.color}}>
{props.distance}m
</Text>
</ImageBackground>
);
};
export default MosqueMarquer;
const styles = StyleSheet.create({
imageBackground: {
width: 70,
height: 70,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: common.FONT_SIZE_H38,
},
});
the selected marker in green is under the none selected one:
THANKS
<XMarksTheSpot coordinates={coordinatesOfYOurMarker} center={center} />
XMarksTheSpot ->
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { Polygon, Polyline, Marker } from 'react-native-maps';
class XMarksTheSpot extends React.Component {
render() {
return (
<View>
<Polygon
coordinates={this.props.coordinates}
strokeColor="rgba(0, 0, 0, 1)"
strokeWidth={3}
/>
<Polyline
coordinates={[this.props.coordinates[0], this.props.coordinates[2]]}
/>
<Polyline
coordinates={[this.props.coordinates[1], this.props.coordinates[3]]}
/>
<Marker coordinate={this.props.center} />
</View>
);
}
}
XMarksTheSpot.propTypes = {
coordinates: PropTypes.array,
center: PropTypes.object,
zIndex: PropTypes.number,
};
export default XMarksTheSpot;
I would like to add a search bar to my maps screen and then use google to find the location associated with the input text and move the map there.
This is what I have right now:
import React, { Component } from 'react';
import {
View
} from 'react-native';
import { Mapview } from 'expo';
export default class screen extends Component {
constructor(props) {
super(props);
this.state = {
initialRegion: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}
};
}
render() {
return (
<View>
<MapView
style={{ flex: 1 }}
initialRegion={this.state.initialRegion}
/>
</View>
)
}
}
I cannot find this feature in the react-native-maps documentation. Is this something I need to build myself?
This answer covers adding a search box onto your map.
As specified in the react-native-maps docs (https://github.com/react-native-maps/react-native-maps#overlaying-other-components-on-the-map) you need to use absolute positioning.
For example the following code:
<MapView loadingEnabled={true} style={styles.map} />
<View style={{ position: 'absolute', top: 10, width: '100%' }}>
<TextInput
style={{
borderRadius: 10,
margin: 10,
color: '#000',
borderColor: '#666',
backgroundColor: '#FFF',
borderWidth: 1,
height: 45,
paddingHorizontal: 10,
fontSize: 18,
}}
placeholder={'Search'}
placeholderTextColor={'#666'}
/>
</View>
Will produce the following layout.
https://ufile.io/1bdoq
Bug:
Mapview wrapped children components may or may not leave the parent component when app loads.
Simulator:
iOS iPhone 6
xCode 10
Environment :
react-native-cli: 2.0.1
react-native: 0.57.0
"react-native-maps": "^0.22.1",
import React, { Component } from 'react';
import {View, Text, TouchableOpacity} from 'react-native'
import MapView from 'react-native-maps';
import { SearchBar } from 'react-native-elements'
import FontAwesome5 from 'react-native-vector-icons/dist/FontAwesome5'
export default class Search extends Component {
static navigationOptions = {
title: 'Search',
header: null
};
constructor(props){
super(props);
this.state = {
region: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
}
}
onRegionChange(region) {
this.setState({ region });
}
render(){
return(
<View style={{flex:1}}>
<MapView
style={{flex: 1}}
onRegionChange={(region) => this.onRegionChange(region)}
initialRegion={this.state.region}
>
<SearchBar
containerStyle={{backgroundColor: 'rgba(0,0,0,0)', borderTopWidth: 0, borderBottomWidth: 0, marginLeft: 10, marginRight: 10}}
inputStyle={{backgroundColor: 'white', marginTop: 30}}
icon={{type: 'material', color: '#86939e', name: 'search',style:{marginTop: 22, zIndex: 9999999}}}
lightTheme
/>
<TouchableOpacity style={{ height: 30, width: 150, backgroundColor:'white', justifyContent: 'center', paddingLeft: 10, paddingRight: 10}}>
<Text style={{textAlign: 'center'}}>Current Location</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 30, width: 30, backgroundColor:'blue', justifyContent: 'center'}}>
<FontAwesome5 name="location-arrow" size={20} color="white"/>
</TouchableOpacity>
</MapView>
</View>
)
}
}
please close. READ THE DOCS do not wrap your components within the mapview, but put it underneath, and use absolute.