react-google-maps responsiveness issue

Question

Couldn't find an answer in previous posts. I'm using react-google-maps and in it comes with a built in way to edit the map style, and object like that

const mapStyles = {
width: '80%',
height: '70%',
marginTop : "90%",
marginLeft : "10%"
};

Which than you call inside the render function

 render() {
    return (

            <Map
                google={this.props.google}
                className="oy-branch"
                style={mapStyles}
                zoom={12}
                initialCenter={{ lat: 32.025791, lng: 34.858472 }}
            >
                <Marker position={{ lat: 32.022133, lng: 34.862111 }} />
            </Map>

    );
}

Now as I get it to make this responsive I need to use a media query in CSS, therefore I gave the "Map" element a class name ("oy-branch") and edited it in the CSS

.oy-branch {
margin-top: 10%;
width : 70% ;
height: 40%;
}   

It worked for margin-top but it ain't working with width/height. What can I do?

Answer 1

You can add a Wrapping

width style as:

div {
   position: relative;
   width: 400px;
   height: 400px; // May be any value
}