How to display google map in reactjs inside of page height and width?

Question

I am trying to put a google map on a after some description on page to start in a react project, and am having trouble. I have created google map in another component and calling that googlemap component into main component.

Map is loading correctly, but facing issue with border map is getting out of the section. I have attached image too. I think the problem is with page component height

const Con = () => {


    return (
        <div className="Contact">
            <Container>
                <Row>
                    <Col xs lg="8">
                        <h1><strong>Contact Us</strong></h1>
                        <br></br>
                        <div>
                        <h5><strong>For any enquiry, please contact Andrew Lal Ji at lalnco@yahoo.co.uk</strong></h5>

                        <p><strong>Coming by Car: </strong></p>
                        <p>Please use post code G3 7LH for Sat Nav.</p>

                        <p><strong>Coming by Bus:</strong></p>

                        <br></br>
                        </div>
                        <div >
                        < MapWrapper />
                        </div>
                    </Col>

                </Row>
            </Container>
        </div>
    );
};

Now i used con.js in App.js module

Here is my component google_map.js:

const mapStyles = {
    width: '100%',
    height: '400px'
  }

export class MapContainer extends Component {
  render() {
    return (
      <Map google={this.props.google} 
        zoom={15}
        style={mapStyles}
        initialCenter={{ lat: 55.866701, lng: -4.279272}}
        >

        <Marker position={{ lat: 55.866701, lng: -4.279272}} />

      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("mykey")
})(MapContainer)

Answer 1

The issue was coming due to the default CSS set by the Map library. Mostly because of position:absolute; property

I have used my own custom class and updated the CSS.

Note: I have used Styled-Jsx to quickly use my CSS. You can use the same CSS in a seperate CSS file and import it here. Or do npm install --save styled-jsx

Here are the code changes in your LetChangeMap.js file (MapContainer) component:

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

const mapStyles = {
    width: '100%',
    height: '400px',
  }

export class MapContainer extends Component {
  render() {
    return (
      
      <Map google={this.props.google} 
        zoom={15}
        className="mapContainerWrapper"
        style={mapStyles}
        initialCenter={{ lat: 55.866701, lng: -4.279272}}
        >
 
        <Marker className="mapContainerMarker" position={{ lat: 55.866701, lng: -4.279272}} />

    <style jsx>{`
        .mapContainerWrapper{
          position:relative !important;
        }

        .mapContainerWrapper div:first-child{
          position:relative !important;
        }
    `}</style>
      </Map>
    );
  }
}
 
export default GoogleApiWrapper({
  apiKey: ("key")
})(MapContainer)

StackBlitz Link: https://stackblitz.com/edit/map-library-issue

StackBlitz Output: https://stackblitz.com/edit/map-library-issue