Change the height and width on a google map in React js - reactjs

Question

Hi guys i am working on a small presentation project. I need make a google map with the ability to auto search location. I found a code what does all that from a tutorial but i can't change the width and the height. I need it to be small, something like: height: 200px and width: 200px.
GoogleMap.js
import React, { Component } from 'react';
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
// for google map places autocomplete
address: '',
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
mapCenter: {
lat: 49.2827291,
lng: -123.1207375
}
};
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
this.setState({ address });
geocodeByAddress(address)
.then(results => getLatLng(results[0]))
.then(latLng => {
console.log('Success', latLng);
// update center state
this.setState({ mapCenter: latLng });
})
.catch(error => console.error('Error', error));
};
render() {
return (
<div id='googleMaps'>
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
<Map
google={this.props.google}
initialCenter={{
lat: this.state.mapCenter.lat,
lng: this.state.mapCenter.lng
}}
center={{
lat: this.state.mapCenter.lat,
lng: this.state.mapCenter.lng
}}
>
<Marker
position={{
lat: this.state.mapCenter.lat,
lng: this.state.mapCenter.lng
}} />
</Map>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: ('_MY_API_KEY_')
})(MapContainer)
App.js
import './App.css';
import GoogleMap from './components/GoogleMap';
function App() {
return (
<div className="App">
<h1>Google Maps App</h1>
<GoogleMap />
</div>
);
}
export default App;
I have error in the console but I don't know if they are connected with this problem.
Here they are:
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
Please update the following components: Wrapper
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Wrapper component.
index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
Move data fetching code or side effects to componentDidUpdate.
If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
Please update the following components: Wrapper
I saw that other people had this problem also but their solutions didn't help me. Any advice is much appreciated!

Answer 1

You can try to wrap the map container in a div and set it's height and width using css. I think that should work

Answer 2

Just have a small change in div created by the script. It should work
return (
<div id='googleMaps' style="width:200px; height:200px">
<PlacesAutocomplete