I have been working with google maps on a react native project. The map was woking yesterday but now it just shows a beige screen with the logo at the bottom. I have seen a few people have had this problem but I cant really fine a solution.
Can anyone please help???
This is my return of my component:
<>
<View style={tw`z-50 `}>
<MapSearchbar searchPosition={setSearchPosition} />
</View>
{showMap ? (
<MapView
provider={PROVIDER_GOOGLE}
ref={mapRef}
style={{ width: '100%', height: '100%', position: 'absolute', zIndex: 1 }}
initialRegion={{
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.092,
longitudeDelta: 0.0421,
}}
onRegionChangeComplete={onRegionChangeComplete}
>
</MapView>
) : (
<></>
)}
</>
Related
[screenshot][1]
mapview :
return (
<MapView
provider={PROVIDER_GOOGLE}
style={[styles.container, style?.container]}
// customMapStyle={mapStyle.current}
initialRegion={{
latitude: currentPosition?.lat ? currentPosition?.lat : point.lat,
longitude: currentPosition?.lng ? currentPosition?.lng : point.lng,
longitudeDelta: 0.1,
latitudeDelta: 0.1
}}
mapType="standard"
showsUserLocation={true}
showsMyLocationButton={true}
followsUserLocation={true}
>
<GymCard></GymCard>
</MapView>
);
my component(GymCard) :
return (
<View style={styles.container}>
<Text.H1> hello </Text.H1>
</View>
);
Component style :
export default StyleSheet.create({
container: {
backgroundColor: "red",
position: "absolute",
top: 100,
left: 100,
height: 200,
borderRadius: SMALL_BORDER_RADIUS
}
});
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>
);
}
I already saw that there were posts where you were trying to solve zIndex defects of react native maps for markers. But it does not work on ANYTHING in react native maps, including Polygon, Polyline. Is there any solution to solve this huge problem?
Thank you for your suggestions.
try to do this :
<MapView
//ref={_map}
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}}
style={{
flex: 1,
...StyleSheet.absoluteFillObject, // <-- add this style to map
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
//provider={PROVIDER_GOOGLE}
>
<Marker
coordinate={{latitude: LATITUDE,longitude: LONGITUDE,}}
title={'itle'}
/>
</MapView>
<View style={{marginVertical: 20, flexDirection: 'row',}}>
<TouchableOpacity
onPress={() => {}}
style={[styles.bubble, styles.button]}>
<Text>Press me</Text>
</TouchableOpacity>
</View>
</View>
I am using react-native-maps on android. I put a custom button clicking on which should go to supplied coordinates (my current location)
<MapView
ref={(map) => { this.map = map; }}
provider={PROVIDER_GOOGLE}
style={{ height: '100%', width: '100%' }}
annotations={markers}
showsUserLocation={true}
showsMyLocationButton={true}
initialRegion={this.state.region}
onRegionChangeComplete={this.onRegionChange}
>
my button -
<TouchableOpacity onPress={this.gotToMyLocation} style={[Style.alignJustifyCenter, {
width: 60, height: 60,
position: "absolute", bottom: 20, right: 20, borderRadius: 30, backgroundColor: "#d2d2d2"
}]}>
<Image
style={{ width: 40, height: 40 }}
source={Images.myLocation}
/>
</TouchableOpacity>
gotToMyLocation method -
gotToMyLocation(){
console.log('gotToMyLocation is called')
navigator.geolocation.getCurrentPosition(
({ coords }) => {
console.log("curent location: ", coords)
console.log(this.map);
if (this.map) {
console.log("curent location: ", coords)
this.map.animateToRegion({
latitude: coords.latitude,
longitude: coords.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005
})
}
},
(error) => alert('Error: Are location services on?'),
{ enableHighAccuracy: true }
)
}
console.log(this.map) always shows undefined.
I want to move map to my current location when clicking the button.
Default my location button
showsUserLocation={true}
showsMyLocationButton={true}
Example:
<MapView
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={{
...StyleSheet.absoluteFillObject,
width: '100%',
}}
initialRegion={{
latitude: targetLocation.latitude,
longitude: targetLocation.longitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
A custom button
<MaterialIcons
style={style.myLocationIcon}
name="my-location"
onPress={() => {
dispatch(settingActions.getLocation());
mapRef.current.animateToRegion({
latitude: myLatitude,
longitude: myLongitude,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
});
}}
/>
For this you need to define mapRef
export const mapRef = React.createRef();
return(
<MapView
ref={mapRef}
Animation
mapRef.current.animateToRegion({ will take care of animation while you switch from one location to another.
Actually i found out a silly mistake where binding the method would make it work. may be useful to someone.
this.gotToMyLocation = this.gotToMyLocation.bind(this);
move your function gotToMyLocation:
if Using Class - in class before render()
or
if using function - use function gotToMyLocation(){...} and don't use this
everyone. I am building a react native app about showing a different location in Map Views depends on selected picker.
I was thinking to used conditional statement by detecting words contain in the string, I use string-contains library to detect some words in a string. Here is the example of my code:
export default class App extends React.Component {
renderMap(){
if(contains(this.state.name, "Branch 1")){
return <MapView
initialRegion={{
latitude: 53.433980,
longitude: -2.950960,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
} else if(contains(this.state.name, "Branch 2")){
return <MapView
initialRegion={{
latitude: 51.491610,
longitude: -0.135560,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
}
else if(contains(this.state.name, "Branch 3")){
return <MapView
initialRegion={{
latitude: 53.461220,
longitude: -2.269540,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
}
else if(contains(this.state.name, "Branch 4")){
return <MapView
initialRegion={{
latitude: 51.262290,
longitude: -1.081610,
longitudeDelta: 0.0922,
latitudeDelta: 0.0421,
}}
style={{height: 200, width: 200, padding: 10, flex: 3, justifyContent: 'space-around'}}
><MapView.Marker
coordinate={{
latitude: 37.78825,
longitude: -122.4324,
}}
/></MapView>;
}
}
render(){
const branchesPicker = this.state.branches.map((item, branch_id)=> {
return(
<Picker.Item
label={item.name}
value={item.address}
key={item.branch_id}/>
)
});
this.renderMap();
return(
<View style={styles.container}>
<Picker
selectedValue={this.state.name}
mode="dropdown"
style={{ height: 50, justifyContent: 'center', flex:4, alignItems: 'stretch', }}
onValueChange={(item)=> this.setState({name: item})}>
{branchesPicker}
</Picker>
{this.renderMap()}
</View>
When I run this code, the picker is working fine but when I tried to change the picker, the map is not changing as I supposed. It's only showing a static one map view (but the map view is not always from branch 1, sometimes it's showing branch 2 or 3 when I reload it. But the point is, it's not changing..)
fyi, this.state.name is showing the branch's name of selected picker.
Thank you so much for your help! It really means a lot..
Assume you are using react-native-maps.
Initial region is used to render and show the location when the map is loaded for the 1st time. When or if you want to change the location after the loading, You can use animateToRegion or many other similar methods. So when you want to change the location on the map when something is picked in picker, just call these methods with your inputs.
here is it snippet of code for reference.
this.map.animateToRegion({ latitude: region.latitude, longitude: region.longitude, latitudeDelta: latitudeDelta, longitudeDelta: longitudeDelta }, timeToChangeRegionInMilliSeconds);