Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blank Map #118

Closed
ghost opened this issue Mar 4, 2016 · 227 comments
Closed

Blank Map #118

ghost opened this issue Mar 4, 2016 · 227 comments

Comments

@ghost
Copy link

ghost commented Mar 4, 2016

Upon running it, all I get is an empty box with red outline.
screen shot 2016-03-04 at 4 25 21 am

screen shot 2016-03-04 at 4 30 10 am

@magrinj
Copy link

magrinj commented Mar 4, 2016

👍 I have the same problem

@sungjinoh
Copy link

Someone help this problem.

@rgoldiez
Copy link

rgoldiez commented Mar 5, 2016

I'm experience the same thing.

@magrinj
Copy link

magrinj commented Mar 6, 2016

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
Copy link
Author

ghost commented Mar 6, 2016

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
Copy link

magrinj commented Mar 6, 2016

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

@ghost
Copy link
Author

ghost commented Mar 6, 2016

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

@magrinj
Copy link

magrinj commented Mar 6, 2016

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

@ghost
Copy link
Author

ghost commented Mar 6, 2016

Let us know how it goes, thanks!

@magrinj
Copy link

magrinj commented Mar 6, 2016

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
Copy link
Author

ghost commented Mar 6, 2016

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

@magrinj
Copy link

magrinj commented Mar 6, 2016

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
Copy link

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

@magrinj
Copy link

magrinj commented Mar 9, 2016

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

@alexHlebnikov
Copy link

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:

2016-03-09 18 47 36

Everything else is the same.

@magrinj
Copy link

magrinj commented Mar 9, 2016

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
Copy link

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.

@magrinj
Copy link

magrinj commented Mar 10, 2016

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
Copy link

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

@alexHlebnikov
Copy link

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
Copy link

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
Copy link

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

@magrinj
Copy link

magrinj commented Mar 17, 2016

@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
Copy link
Author

ghost commented Mar 17, 2016

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
Copy link

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
Copy link

lellex commented Mar 22, 2016

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
Copy link

magrinj commented Mar 22, 2016

@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
Copy link

lellex commented Mar 22, 2016

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

@magrinj
Copy link

magrinj commented Mar 22, 2016

@lellex Ok great 👍

@cuadros-code
Copy link

Sin título

@sajjadseifi
Copy link

sajjadseifi commented Sep 11, 2021

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/

Screenshot (486)

@Abhishekhirapara348
Copy link

how did you solve i am facing exact same problem

@patrickgalbraith
Copy link

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
Copy link

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

@PaulusZaky
Copy link

PaulusZaky commented Mar 25, 2024

Hello, @magrinj

This blank map issue occurred on iOS simulator.

24 03 2024_14 07 47_REC

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

24 03 2024_14 12 39_REC

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
Copy link

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

@PaulusZaky
Copy link

PaulusZaky commented Mar 26, 2024

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
Copy link

can you try physical device?

  • what is your react-native-maps version?

@PaulusZaky
Copy link

PaulusZaky commented Mar 26, 2024

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

And I can not test on physical server

@chanphiromsok
Copy link

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

@PaulusZaky
Copy link

PaulusZaky commented Mar 26, 2024

@chanphiromsok , i am using react-native-cli

@chanphiromsok
Copy link

chanphiromsok commented Mar 26, 2024

@chanphiromsok , i am using react-native-cli

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

@PaulusZaky
Copy link

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

@chanphiromsok
Copy link

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

@PaulusZaky
Copy link

PaulusZaky commented Mar 26, 2024

@chanphiromsok I have tried that but does not work
26 03 2024_13 47 35_REC

@chanphiromsok
Copy link

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

@chanphiromsok
Copy link

seem weird I dont have issue like that

@PaulusZaky
Copy link

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

@chanphiromsok
Copy link

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
Copy link

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
Copy link

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
Copy link

OFD16 commented Apr 23, 2024

image

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
Copy link

Thanks for your kind help.

Great appreciate.

@GundamSudarshan
Copy link

GundamSudarshan commented Sep 5, 2024

I'm facing the issue in map is showing in gray colour
how can i fix it ?
map_issue

@OFD16
Copy link

OFD16 commented Sep 5, 2024

@GundamSudarshan did you enabled new fabric in gradle.properties. ( new architecture true) set this false and clean last build with cd android & ./gradlew clean . After rebuild app. If it works tell us

@GundamSudarshan
Copy link

@OFD16 gradle.properties new architecture is in true only. Map was not showing it's was showing in gray colour

@OFD16
Copy link

OFD16 commented Sep 6, 2024

@GundamSudarshan convert it false and try again like i said. If it works check the is configration is exist for new arch in maps package

@GundamSudarshan
Copy link

@OFD16 It's convert into false also. It's was not working. It's was showing in red colour

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests