google-maps-react Map not showing up

Question

I'm working on an app where I'd like to display a google maps with a marker. I thought I followed the steps correctly on the google-maps-react documentation, but I'm having issues.

First, the map shows up gray and none of the land/ocean is showing.

Second, the map seems to go off the screen but my browser doesn't scroll so I can't see the rest of the map. I'm assuming this has to do with the styling but I can't figure it out.

Here is a screenshot of the browser for reference:

My Map component:

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '90%',
};

export class MapContainer extends Component {
    state = {
        showingInfoWindow: false,  // Hides or shows the InfoWindow
        activeMarker: {},          // Shows the active marker upon click
        selectedPlace: {}          // Shows the InfoWindow to the selected place upon a marker
    };
    render() {
        const {google, location} = this.props;

        return (
            <Map
                google={this.props.google}
                zoom={5}
                style={mapStyles}
                initialCenter={{
                    lat: location.latitude,
                    lng: location.longitude
                }}
                center={{
                    lat: location.latitude,
                    lng: location.longitude
                }}
            >
                <Marker
                    name={'ISS'}
                    position={{
                        lat: location.latitude,
                        lng: location.longitude
                    }}
                    icon={{
                        url: 'https://icons.iconarchive.com/icons/goodstuff-no-nonsense/free-space/512/international-space-station-icon.png',
                        anchor: new google.maps.Point(32,32),
                        scaledSize: new google.maps.Size(80,80)
                    }} 
                />
            </Map>
        );
    }
}

export default GoogleApiWrapper({
    apiKey:process.env.REACT_APP_API_KEY
})(MapContainer);

Any help would be appreciated

score 1 · Answer 1 · answered Jun 01 '22 at 22:45

I was actually able to solve the issue by adding the styling: 'overflow: visible' to my map component. I'm not sure why this was an issue or why it defaults to hidden, so if anyone has insight on that it would be helpful. But this solved both issues I was having.

google-maps-react Map not showing up

1 Answers1