15 thoughts on “Blank Map

  1. There is another ticket #109 which indicates that the map isn’t loaded in debug mode, but I’m not in debug mode and I still have the problem, but, if some of you are in debug mode try without, just in case 🙂

  2. Ok I think I just find the problem, try to put your MapView in a View with this styles for the map and the container:

    const styles = StyleSheet.create({
      container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
      },
      map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
    });
    

    The map need to be in absolute position with the top, left, right and bottom props 🙂
    That’s work for me !

    Edit: You can put your MapView without container, but if you put your MapView in a container this container also need to be in absolute position with the top, left, right and bottom props.

  3. I stay with ES6 Syntax, just bellow you can see my file:

    import MapView from 'react-native-maps';
    
    import React, {
      Component,
      StyleSheet,
    } from 'react-native';
    
    const styles = StyleSheet.create({
      container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
      },
      map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
    });
    
    class Home extends Component {
    
      constructor() {
        super();
      }
    
      render() {
        return (
          <MapView
            style={ styles.map }
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          />
        );
      }
    
    }
    
    export default Home;
  4. It seems to be not the styles problem, but Google Maps API configuration problem.
    Thank you for help anyway.

    Now I have this:
    2016-03-10 14 38 27

    And now I’m trying to configure Google API credentials.

  5. And one important thing – don’t forget to enable Google Maps Android API in your Google Developers Console API Manager.

  6. I’m experiencing the same behavior via my IOS simulator even after making the changes. Note, running the Example app runs fine without an api key

  7. It seems to be not the styles problem, but Google Maps API configuration problem.
    Thank you for help anyway.
    Now I have this:
    2016-03-10 14 38 27
    And now I’m trying to configure Google API credentials.

    I am getting this problem, do you know how you solved it ?

    I had the same issue, but today I was able to fix it :), it not a problem related with styles, it is just a problem related to GOOGLE API KEY, so I highly recommend you to follow the troubleshooting section of the react-native-maps library.

    but basically the steps you need to take to fix this issue, are following:

    1. Make sure you Enable the Google Maps SDK for IOS (This was my case), or the Google Maps SDK Android
    2. Once you have enabled the SDK, you need to make sure that your API KEY is restricted only for the platform that you are using, a good tip could be leave your api key without any restrictions, just to make it work 🙂 (but remember restrict it later)
    3. Enjoy Google Maps into your React Native app 😀

Comments are closed.

14 thoughts on “Blank Map

  1. Ok I think I just find the problem, try to put your MapView in a View with this styles for the map and the container:

    const styles = StyleSheet.create({
      container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
      },
      map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
    });
    

    The map need to be in absolute position with the top, left, right and bottom props 🙂
    That’s work for me !

    Edit: You can put your MapView without container, but if you put your MapView in a container this container also need to be in absolute position with the top, left, right and bottom props.

  2. I stay with ES6 Syntax, just bellow you can see my file:

    import MapView from 'react-native-maps';
    
    import React, {
      Component,
      StyleSheet,
    } from 'react-native';
    
    const styles = StyleSheet.create({
      container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
      },
      map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
    });
    
    class Home extends Component {
    
      constructor() {
        super();
      }
    
      render() {
        return (
          <MapView
            style={ styles.map }
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
          />
        );
      }
    
    }
    
    export default Home;
  3. It seems to be not the styles problem, but Google Maps API configuration problem.
    Thank you for help anyway.

    Now I have this:
    2016-03-10 14 38 27

    And now I’m trying to configure Google API credentials.

  4. And one important thing – don’t forget to enable Google Maps Android API in your Google Developers Console API Manager.

  5. render(){
        return(
    
    
          <View accessible={true} style={styles.container}>
    
    
    
        <MapView
        style={ styles.map }
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
    />
    
    
          </View>
    
    
    
        );
      }
    }
    
    
    
    const styles = StyleSheet.create({
      fadeIn:{
        width:250,
        height:50,
        backgroundColor:'#bdc3c7',
      },
      container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
      },
      map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      },
    });
    

    I had the same blank map view and found that it is do with styling map position should be absolute
    image

  6. Have found the root cause, your AVD API level should be 24 or 25. what I used was API 27.
    Target should be Google Play API instead of Google API.
    image

    image

  7. @vikram24051992 please read all comment above. You will get interesting fact and solution. you will never face a problem with the map if you read all the comment above. Hope this will help

Comments are closed.