Search code examples
react-nativereact-native-maps

Using a 2d Google Map on react-native-maps


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:

enter image description here

This is what I want (2D using https://mapstyle.withgoogle.com/):

enter image description here

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?


Solution

  • Set showsBuildings to false for the <MapView /> component.

    reference: https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md