Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot get Map to show up at all, blinks for second, then disappears

See original GitHub issue

Spasibo bolshoi for this great package.

That said I can’t get it to show up on the screen. It comes up for a second then disappears.

The relevant code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { TopBar, InfoBar } from './top-bar';
import MiddleBanner from './splash-banner';
import InventoryMap from './inventory';

class Application extends Component {

  render() {
    return (
      <div>
        <TopBar/>
        <InfoBar/>
        <MiddleBanner/>
        <InventoryMap/>
      </div>
    );
  }
};

render((
  <MuiThemeProvider>
    <Application/>
  </MuiThemeProvider>
), document.querySelector('#container'));

And the InventoryMap

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

const p = {
  zoom: 11,
  center: {lat: 59.95, lng: 30.33}
};

const Inventory = ({}) => (
  <GoogleMapReact
    defaultCenter={p.center}
    defaultZoom={p.zoom}
    >
    <AnyReactComponent
      lat={59.955413}
      lng={30.337844}
      text={'Kreyser Avrora'}
      />
  </GoogleMapReact>
);

export default Inventory;

there is no other CSS, I have also tried wrapping the GoogleMapReact component with a parent with min-height and height, both to no avail.