Blank Map #118

ghost · 2016-03-04T09:26:01Z

Upon running it, all I get is an empty box with red outline.

magrinj · 2016-03-04T15:58:35Z

👍 I have the same problem

sungjinoh · 2016-03-05T06:27:30Z

Someone help this problem.

rgoldiez · 2016-03-05T11:30:46Z

I'm experience the same thing.

magrinj · 2016-03-06T10:28:11Z

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 :)

ghost · 2016-03-06T11:28:45Z

Just out of curiosity, is everyone using ES6 syntax (class extends component), or the older JS syntax (React.createClass) to make their class? I'm thinking the error might be a confusion with state/props.

magrinj · 2016-03-06T11:29:56Z

I'm currently using the ES6 syntax, and you ?

ghost · 2016-03-06T11:31:20Z

ES6 for me as well. The examples are done with the other syntax so maybe that's throwing something off.

magrinj · 2016-03-06T11:33:33Z

Yes maybe, I'm gonna try with the older syntax :)

ghost · 2016-03-06T11:34:05Z

Let us know how it goes, thanks!

magrinj · 2016-03-06T11:39:39Z

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.

ghost · 2016-03-06T11:48:03Z

No luck for me. Should I try it with the other syntax or did you stay with ES6?

magrinj · 2016-03-06T12:01:18Z

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;

alexHlebnikov · 2016-03-09T12:33:22Z

Same problem here, ES6 syntax, positioning manipulation doesn't helps.

magrinj · 2016-03-09T12:34:27Z

If you just copy-paste my example you still have the problem ?

alexHlebnikov · 2016-03-09T12:49:44Z

Not exactly, I've also have AppRegistry in import React and a line on the bottom:
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Without AppRegistry there is an error in Android emulator:

Everything else is the same.

magrinj · 2016-03-09T12:59:01Z

Ok, so AppRegistry it's normal, you need this class one time (or two if you have two indexes, one for iOS and one for Android) to specify the first class called in the bundle, it's the base of your application.
So if you want to use my code create a new file Home.js, and copy-paste my code.
In your index file, for android -> index.android.js put this code:

import Home from './Home';

import React, {
  AppRegistry,
  Component,
} from 'react-native';

class AwesomeProject extends Component {

  render() {
    return (
      <Home />
    );
  }

}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Try to run again your project, if you still have a blank map don't forget to setup Google Maps API.
It's explain right here in the Installation guide, Step 4 in Android installation.

alexHlebnikov · 2016-03-10T08:55:55Z

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.

Now I have this:

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

magrinj · 2016-03-10T09:20:02Z

Ok thanks for your answer :)
I only try on my iOS emulator and when I change the style in another thing than absolute position my view is blank.
When that's work for you on Android device, please post a quick response, just to know if you do something specific than the installation guide

kelvinaliyanto · 2016-03-12T17:32:05Z

Hi, anyone got it working on iOS? I also got the same red border going on.

alexHlebnikov · 2016-03-15T08:37:36Z

Still no success in showing tiles on map, same thing (like in my previous message) in emulator and in real Android device.

I've done everything like it's said in the instruction.

alexHlebnikov · 2016-03-16T08:21:12Z

Hey guys, I've finally fixed my issue.

My Google Maps Api Key was incorrect.
I've regenerated it using instructions here - https://developers.google.com/maps/documentation/android-api/signup#release-cert - this time I'm using a Debug Certificate and now map works perfectly.

alexHlebnikov · 2016-03-17T11:00:05Z

And one important thing - don't forget to enable Google Maps Android API in your Google Developers Console API Manager.

magrinj · 2016-03-17T11:03:56Z

@alexHlebnikov: I was my first answer :)
But yes the installation guides isn't very clear about the API Key, I think you can do a PR for that!

ghost · 2016-03-17T16:06:12Z

I assume that's what my problem is as well, the API key. The instructions lacked info on it, i'll try it out later.

smooJitter · 2016-03-20T01:59:48Z

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

lellex · 2016-03-22T10:44:37Z

Same blank page with red borders on iOS... I guess the API key has nothing to do with this issue right ? The instructions seems to use Plans ?

magrinj · 2016-03-22T12:28:26Z

@lellex Yes the API key has nothing to do with iOS because that's use Plan. Did you try to set you map in absolute position with the props top, right, left and bottom set to 0, if that still doesn't work make sure the lib is linked in Xcode, or link it with rnpm

lellex · 2016-03-22T13:29:31Z

Thanks, but I didn't install the plugin correctly (first time I try on iOS)... and it's works fine !

magrinj · 2016-03-22T13:31:56Z

@lellex Ok great 👍

TaraSinghDanu · 2020-10-21T16:47:36Z

When the api key is not restricted Map is visible on android device.After restricting the api key with package name and sha1 key map is blank.

The same restricted key is working on a native andoid app.

Only on react-native, map is blank.

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View } from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

export default class App extends Component {
render() {
return (

<MapView
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: 20.993776,
longitude: 105.811417,
latitudeDelta: 0.021,
longitudeDelta: 0.021
}}
style={StyleSheet.absoluteFillObject}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});

AppRegistry.registerComponent("MapExample", () => App);

smajazayeri · 2020-12-16T05:03:50Z

My issue was related to the SH1 cert and it was fixed by following these steps:
https://docs.expo.io/versions/latest/sdk/map-view/#deploying-to-the-google-play-store

anhnch · 2021-01-22T09:41:54Z

For me, the credential was right, but I forgot to manually enable the SDK.

"Add maps based on Google Maps data to your iOS application with the Maps SDK for iOS. The SDK automatically handles access to the Google Maps servers, map display and response to user gestures such as clicks and drags." As I understand, It guards the incoming request. Enabling it shows the map content.

HadiKhalifeh · 2021-03-24T17:48:16Z

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.

Now I have this:

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

@alexHlebnikov You solve it?

xmanemran · 2021-04-08T07:03:33Z

For this issue, You have to enable the SDK for the specific platform.
In order to do that go to https://console.cloud.google.com/apis/library/ and click on Maps SDK for Android or Maps SDK for IOS and then click on Enable.

i01000101 · 2021-04-24T08:42:21Z

It seems to be not the styles problem, but Google Maps API configuration problem.
Thank you for help anyway.

Now I have this:

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

The documentation says:

The map background is gray (Google Maps)

If you get grey screen on android device create google_maps_api.xml in android/app/src/main/res/values.

<resources>
  <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">(api key here)</string>
</resources>

It works for me.

cuadros-code · 2021-04-29T05:14:40Z

sajjadseifi · 2021-09-11T07:06:40Z

I had the same problem
And when
map sdk for android
I launched
And I made another api key, it worked properly
you can see this link to help

https://aboutreact.com/react-native-map-example/

Abhishekhirapara348 · 2021-12-22T12:55:04Z

how did you solve i am facing exact same problem

patrickgalbraith · 2022-01-19T00:24:27Z

If it works locally but not when uploaded to the Play store and you use Play App Signing. Make sure the Play signing key is whitelisted in the "Maps SDK for Android" you can find the SHA1 key in the Play console under "Setup -> App integrity -> App signing key certificate".

mehuljetani · 2022-07-23T05:12:13Z

create second API for the android ...It works for me...

PaulusZaky · 2024-03-25T23:04:02Z

Hello, @magrinj

This blank map issue occurred on iOS simulator.

I am going to use Apple Maps with react-native-maps module on iOS
The map works on Android.

And the geocode, I am getting without Google Map API Key.
How can fix my issue on my side?

Here is my code and API

<View style={styles.container}>
    {region ? (
        <MapView
            style={styles.map}
            initialRegion={{
                latitude: region.latitude,
                longitude: region.longitude,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            }}
        >
            <Marker coordinate={region} />
        </MapView>
        ) : null}
</View>

const getLatLong = async () => {
        const address = job.street + ', '+ job.city + ', '+ job.state + ' ' + job.zipcode + ', '+ 'USA';
        console.log("Address:", address)
        try {
          const encodedAddress = encodeURIComponent(address);
          const response = await axios.get(`https://nominatim.openstreetmap.org/search?q=${encodedAddress}&format=json&limit=1`);
          
          if (response.data.length > 0) {
            const { lat, lon } = response.data[0];
            setRegion({ latitude: parseFloat(lat), longitude: parseFloat(lon) });
          } else {
            throw new Error("No coordinates found for the given address");
          }
        } catch (error) {
          console.error("Error fetching coordinates:", error.message);
          setRegion(null);
        }
      };

const styles = StyleSheet.create({
    container: {
        width: Constants.LAYOUT.SCREEN_WIDTH - 40, 
        height: 150,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
});

Thanks in advance.

chanphiromsok · 2024-03-26T01:43:28Z

can you pass provider="google" to MapView and test it because on IOS default is apple map

PaulusZaky · 2024-03-26T02:32:24Z

Thank you for your reply, @chanphiromsok

You, I am going to use apple map on iOS version
I do not need Google Map API key

Please give me your reply if you have experience in this.

Thanks again! :)

chanphiromsok · 2024-03-26T02:41:11Z

can you try physical device?

what is your react-native-maps version?

PaulusZaky · 2024-03-26T02:45:06Z

@chanphiromsok , My react-native-maps version is
"react-native-maps": "^1.10.2",

And I can not test on physical server

chanphiromsok · 2024-03-26T02:59:10Z

do you use bare project react-native or expo? if so can you try with a new project and run the simulator again?

PaulusZaky · 2024-03-26T03:01:05Z

@chanphiromsok , i am using react-native-cli

chanphiromsok · 2024-03-26T03:02:46Z

@chanphiromsok , i am using react-native-cli

which version are you using ? , can you new init new project ? and test it ?

PaulusZaky · 2024-03-26T03:04:23Z

@chanphiromsok ,
here is my react native version
"react-native": "0.72.3",

chanphiromsok · 2024-03-26T03:05:45Z

now can you try to create new project and test it again and build new

PaulusZaky · 2024-03-26T12:48:53Z

@chanphiromsok I have tried that but does not work

chanphiromsok · 2024-03-30T08:39:36Z

can you remove condition rendering ? on MapView just display MapView without any logic

chanphiromsok · 2024-03-30T08:39:53Z

seem weird I dont have issue like that

PaulusZaky · 2024-03-30T11:27:11Z

Yup, I did not add any logic in this app.
Only MapView with constant coordinates.

chanphiromsok · 2024-03-30T11:33:27Z

Yup, I did not add any logic in this app.

Only MapView with constant coordinates.

I see your maps is loaded can you try pass initialCamera to MapView

PaulusZaky · 2024-03-30T11:35:20Z

Yup, I did not add any logic in this app.
Only MapView with constant coordinates.

I see your maps is loaded can you try pass initialCamera to MapView

What do you mean?

chanphiromsok · 2024-03-30T13:14:58Z

Yup, I did not add any logic in this app.

Only MapView with constant coordinates.

I see your maps is loaded can you try pass initialCamera to MapView

What do you mean?

I don't know about your configuration in native side I don't know how is your config if so do you have experienced with expo ? you can try expo prebuild in case you are missing configuration

OFD16 · 2024-04-23T12:28:43Z

I tried :

package version update/downgrade
apikey (removed apikey & put again) it changes that means my apikey true
checked style for MapView. applyed as in documentation on github for style
checked is enable Android SDK for Maps and it was already enabled
added SHA1 debug key to apikey config on GoogleCloudServices and nothing changed.

i am using my apikey already on my website. i am trying to use this on android too. also i added sha1 key. but it removed my other restrict for website on console.

At the end i removed al Restricts and save it. After that it work but i know that it shoudl be Restricted for website and mobile app. But For now, I can say that I saved the day for development. At least I found the source of the problem.

import React from 'react';
import {NativeStackScreenProps} from '@react-navigation/native-stack';
import {RootStackParamList} from '../types';
import {RouteProp} from '@react-navigation/native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import Geolocation, {
  GeolocationError,
  GeolocationResponse,
} from '@react-native-community/geolocation';

type Props = {
  navigation: NativeStackScreenProps<RootStackParamList, any>['navigation'];
  route: RouteProp<RootStackParamList, 'MapScreen'>;
};
export default function MapScreen({navigation, route}: Props) {
  const [userLocation, setUserLocation] = React.useState<
    GeolocationResponse | undefined
  >(undefined);

  const [geolocationError, setGeolocationError] = React.useState<
    GeolocationError | undefined
  >(undefined);
  Geolocation.getCurrentPosition(
    info => setUserLocation(info),
    error => setGeolocationError(error),
    {
      enableHighAccuracy: true,
    },
  );

  return (
    <View style={styles.container}>
      <MapView
        onMapLoaded={event => {
          console.log('Map loaded');
        }}
        provider="google"
        style={styles.map}
        mapType={'terrain'}
        userInterfaceStyle={'dark'}
        region={{
          latitude:
            (userLocation && userLocation!.coords!.latitude) || 37.78825,
          longitude:
            (userLocation && userLocation!.coords!.longitude) || -122.4324,
          latitudeDelta: 0.5,
          longitudeDelta: 0.5,
        }}>
        {userLocation && (
          <Marker
            coordinate={{
              latitude: userLocation!.coords!.latitude,
              longitude: userLocation!.coords!.longitude,
            }}
            draggable
            title={'marker.title'}
            description={'marker.description'}
          />
        )}
      </MapView>
    </View>
  );
}

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

PaulusZaky · 2024-05-31T04:43:54Z

Thanks for your kind help.

Great appreciate.

christopherdro mentioned this issue Mar 24, 2016

blank page #148

Closed

Blank Map #118

Blank Map #118

Comments

ghost commented Mar 4, 2016

magrinj commented Mar 4, 2016

sungjinoh commented Mar 5, 2016

rgoldiez commented Mar 5, 2016

magrinj commented Mar 6, 2016

ghost commented Mar 6, 2016

magrinj commented Mar 6, 2016

ghost commented Mar 6, 2016

magrinj commented Mar 6, 2016

ghost commented Mar 6, 2016

magrinj commented Mar 6, 2016

ghost commented Mar 6, 2016

magrinj commented Mar 6, 2016

alexHlebnikov commented Mar 9, 2016

magrinj commented Mar 9, 2016

alexHlebnikov commented Mar 9, 2016

magrinj commented Mar 9, 2016

alexHlebnikov commented Mar 10, 2016

magrinj commented Mar 10, 2016

kelvinaliyanto commented Mar 12, 2016

alexHlebnikov commented Mar 15, 2016

alexHlebnikov commented Mar 16, 2016

alexHlebnikov commented Mar 17, 2016

magrinj commented Mar 17, 2016

ghost commented Mar 17, 2016

smooJitter commented Mar 20, 2016

lellex commented Mar 22, 2016

magrinj commented Mar 22, 2016

lellex commented Mar 22, 2016

magrinj commented Mar 22, 2016

TaraSinghDanu commented Oct 21, 2020 • edited Loading

smajazayeri commented Dec 16, 2020

anhnch commented Jan 22, 2021

HadiKhalifeh commented Mar 24, 2021

xmanemran commented Apr 8, 2021 • edited Loading

i01000101 commented Apr 24, 2021

The map background is gray (Google Maps)

cuadros-code commented Apr 29, 2021

sajjadseifi commented Sep 11, 2021 • edited Loading

Abhishekhirapara348 commented Dec 22, 2021

patrickgalbraith commented Jan 19, 2022

mehuljetani commented Jul 23, 2022

PaulusZaky commented Mar 25, 2024 • edited Loading

chanphiromsok commented Mar 26, 2024

PaulusZaky commented Mar 26, 2024 • edited Loading

chanphiromsok commented Mar 26, 2024

PaulusZaky commented Mar 26, 2024 • edited Loading

chanphiromsok commented Mar 26, 2024

PaulusZaky commented Mar 26, 2024 • edited Loading

chanphiromsok commented Mar 26, 2024 • edited Loading

PaulusZaky commented Mar 26, 2024

chanphiromsok commented Mar 26, 2024

PaulusZaky commented Mar 26, 2024 • edited Loading

chanphiromsok commented Mar 30, 2024

chanphiromsok commented Mar 30, 2024

PaulusZaky commented Mar 30, 2024

chanphiromsok commented Mar 30, 2024

PaulusZaky commented Mar 30, 2024

chanphiromsok commented Mar 30, 2024

OFD16 commented Apr 23, 2024 • edited Loading

PaulusZaky commented May 31, 2024

TaraSinghDanu commented Oct 21, 2020 •

edited

Loading

xmanemran commented Apr 8, 2021 •

edited

Loading

sajjadseifi commented Sep 11, 2021 •

edited

Loading

PaulusZaky commented Mar 25, 2024 •

edited

Loading

PaulusZaky commented Mar 26, 2024 •

edited

Loading

PaulusZaky commented Mar 26, 2024 •

edited

Loading

PaulusZaky commented Mar 26, 2024 •

edited

Loading

chanphiromsok commented Mar 26, 2024 •

edited

Loading

PaulusZaky commented Mar 26, 2024 •

edited

Loading

OFD16 commented Apr 23, 2024 •

edited

Loading