Google Maps Display Circular Pattern with React

I am attempting to implement a simple map in a webpage I am working on and whenever it renders it only shows circular sections of the map, see below.

[![enter image description here][1]][1]

The above photo is using react-google-maps.

Figuring it must be an error with the npm, I installed google-map-react but still got a similar map being displayed

[![enter image description here][2]][2]

Below is the code used to generate the second map

import GoogleMapReact from 'google-map-react';
 
const AnyReactComponent = ({ text }) => <div>{text}</div>;
 
class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };
 
  render() {
    return (
      // Important! Always set the container height explicitly
      <div style=>
        <GoogleMapReact
          bootstrapURLKeys=
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}
 
export default SimpleMap;```

Any help would be appreciated.


  [1]: https://i.stack.imgur.com/bjCf7.png
  [2]: https://i.stack.imgur.com/Au7Km.png

from Recent Questions - Stack Overflow https://ift.tt/3kKLBWi
https://ift.tt/eA8V8J