I've tried looking at the documentation for react-native-maps, and can't for the life of me figure out why the Google Map is showing up as 3D:
This is what I want (2D using https://mapstyle.withgoogle.com/):
Standard code:
import * as React from 'react';
import MapView, { Polygon, PROVIDER_GOOGLE } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import mapStyle from './assets/mapStyle.json';
export default function App() {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
customMapStyle={mapStyle}
showsUserLocation>
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
It's likely a noob question, but does anyone know why?
Set showsBuildings
to false
for the <MapView />
component.
reference: https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md