# React NextJs Ionic Capacitor Android Google Map Showing Gray Screen Unless I Drag Around

**URL:** <https://forum.ionicframework.com/t/react-nextjs-ionic-capacitor-android-google-map-showing-gray-screen-unless-i-drag-around/223302>\
**Category:** Ionic React\
**Created:** [May 15, 2022, 7:58pm UTC](https://forum.ionicframework.com/t/react-nextjs-ionic-capacitor-android-google-map-showing-gray-screen-unless-i-drag-around/223302 "2022-05-15T19:58:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lassoxo](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lassoxo](https://forum.ionicframework.com/u/lassoxo)\
**Post date:** [May 15, 2022, 7:58pm UTC](https://forum.ionicframework.com/t/react-nextjs-ionic-capacitor-android-google-map-showing-gray-screen-unless-i-drag-around/223302/1 "2022-05-15T19:58:36Z")

</div>

I am using the @react-google-maps/api. This library works on iOS and the web, and the API token also works.

when the android app loads (the map will remain gray):

 ![1](https://global.discourse-cdn.com/ionicframework/original/3X/9/d/9d3d3082b6906930cbc9367085d314c645838c60.png)

after I drag the gray map around with my cursor, the gray tiles will load into map chunks (on emulator):

 ![2](https://global.discourse-cdn.com/ionicframework/original/3X/d/8/d84f56a5be8182cf929080a2d291372af6c601d3.jpeg)

gMap.tsx:

```auto
import React from "react";
import gMapStyles from "./gMapStyles";
import { connect } from 'react-redux';
import {
  GoogleMap,
} from "@react-google-maps/api";

const mapContainerStyle = {
  height: "100vh",
  width: "100vw",
};

const options = {
  styles: gMapStyles,
  disableDefaultUI: true,
  zoomControl: false,
};

const center = {
  lat: 43.6532,
  lng: -79.3832,
};

const GMap = () => {

  return (
    <GoogleMap
      id="map"
      mapContainerStyle={mapContainerStyle}
      zoom={9}
      center={center}
      options={options}
    >

    </GoogleMap>
  );
}

export default connect(
  null,
  {}
)(GMap);

```

locationFunctions.tsx:

```auto
import GMap from './fragements/gMap';
import LocationSearchInput from "./fragements/locationSearchInput"
import LocationSearchSuggestions from "./fragements/locationSearchSuggestions"

import {
  useLoadScript
} from "@react-google-maps/api";

interface IProps {
  render: string;
}

const libraries = []
libraries.push("places");

const LocationFunctions = (props: IProps) => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "MY_API_KEY",
    libraries,
  });

  if (loadError) return <div>Error</div>;
  if (!isLoaded) return <div></div>;

  const component = () => {
    switch(props.render) {

      case "GMap": return <GMap/>;
      case "LocationSearchInputDeparture": return <LocationSearchInput inputType="departure"/>;
      case "LocationSearchInputDestination": return <LocationSearchInput inputType="destination"/>;
      case "LocationSearchSuggestions": return <LocationSearchSuggestions/>;

      default: return <h1>component not found</h1>
    }
  }

  return (
    <div>{ component() }</div>
  );
}

export default LocationFunctions

```

app.tsx

```auto
import React, { Fragment } from 'react';
import { Route } from 'react-router-dom';
import { IonApp, setupIonicReact, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Provider } from 'react-redux';
import configureStore from '../store.config';
import dynamic from 'next/dynamic';

setupIonicReact({
  mode: 'md'
});

const store = configureStore((window as any). __PRELOADED_STATE__ );

const Initialize = dynamic(() => import('./view/utility/initialize'));
const LocationFunctions = dynamic(() => import('./view/utility/locationFunctions'));
const Home = dynamic(() => import('./view/home/view'));
const Review = dynamic(() => import('./view/review/view'));
const ScheduleRide = dynamic(() => import('./view/schedule/view'));
const Ride = dynamic(() => import('./view/ride/view'));
const Menu = dynamic(() => import('./view/menu/view'));

const App = () => {
  return (
    <IonApp>
      <Provider store={store}>
        <IonReactRouter>
          <IonRouterOutlet id="main">
            <Fragment>
              <Initialize/>
              <LocationFunctions render={"GMap"}/>
              <Route path="/" component={Home} exact={true}/>
              <Route path="/review" component={Review} exact={true}/>
              <Route path="/schedule-ride*" component={ScheduleRide} exact={true}/>
              <Route path="/ride*" component={Ride} exact={true}/>
              <Route path="/menu" component={Menu} exact={true}/>
            </Fragment>
          </IonRouterOutlet>
        </IonReactRouter>
      </Provider>
    </IonApp>
  );
};

export default App;

```

relevant package.json versions:

```auto
    "@capacitor/android": "^3.5.1",
    "@capacitor/cli": "^3.5.1",
    "@capacitor/core": "^3.5.1",
    "@capacitor/geolocation": "^1.3.1",
    "@capacitor/ios": "^3.5.1",
    "@capacitor/storage": "^1.2.5",
    "@ionic/react": "^6.1.4",
    "@ionic/react-router": "^6.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",

```

I’m new to ionic and I couldn’t find a similar issue on the forum, please help!

---

<div class="post-metadata">

**Author:** ![yellowkicks](https://avatars.discourse-cdn.com/v4/letter/y/b782af/32.png) [@yellowkicks](https://forum.ionicframework.com/u/yellowkicks)\
**Post date:** [May 16, 2022, 1:14am UTC](https://forum.ionicframework.com/t/react-nextjs-ionic-capacitor-android-google-map-showing-gray-screen-unless-i-drag-around/223302/2 "2022-05-16T01:14:09Z")

</div>

Try setting the the `--background` of your `<IonContent>` to `transparent`.

Or, use a `setTimeout` around your map loading.

---

<div class="post-metadata">

**Author:** ![lassoxo](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lassoxo](https://forum.ionicframework.com/u/lassoxo)\
**Post date:** [May 16, 2022, 7:47am UTC](https://forum.ionicframework.com/t/react-nextjs-ionic-capacitor-android-google-map-showing-gray-screen-unless-i-drag-around/223302/3 "2022-05-16T07:47:12Z")

</div>

All I can say is bless your soul.

setTimeout worked like magic:

```auto
  const [loadMap, setLoadMap] = useState<boolean>(false)

  useEffect(() => { // I don't know why, but we can't load map tiles on android until a bit of a delay, maybe something with Next?
    setTimeout(() => setLoadMap(true), 500) //loading page
  }, []);

  if (!loadMap) {
    return(
      <div>loading...</div>
    )
  } else if(loadMap) {
    return (
      <GoogleMap>
      </GoogleMap>
    );
  }

```