CODEWITHSUNDEEP
javascripthtmlcssreactjsgoogle-maps
kpo1
kpo1

Reputation: 63

React google-maps-react, Change property of hidden div from google maps api

So I am rendering some maps using the google-maps-react library. However, I am having an issue with the most outter div which the google maps component produces. I don't want the div to be larger than its parent div, but its by default set to 100% width+height as well as position absolute(so oveflow:hidden does not work). It also does not have a id or class name therefor I cannot grab the div directly.

Below is the code to how I have my Map in a return statement for one of my react methods. The style change takes affect for the div BELOW the most outer div, not the one I need to change. 

  <Map google={this.props.google} zoom={14} style={{width:'200px', 
     height:'200px', position:'relative'}}>
              <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />
              <InfoWindow onClose={this.onInfoWindowClose}>
                <div>
                   "test"
                </div>
          </InfoWindow>
   </Map>

Below is a snippet of the two most outer divs produced by the google maps react component. The most outer div is basically invisible and I can't change its style properties

If someone can help me out on how to change that style property to 'position:relative' that would be great!

Upvotes: 1

Views: 3086

Answers (1)

Saurabh Kumar
Saurabh Kumar

Reputation: 61

you can access inner first div using this css code

.classname div:first-child{
 position: relative !important;
}

In your case use like this

<div id="mapBox">
  <Map google={this.props.google} zoom={14} style={{width:'200px', 
     height:'200px', position:'relative'}}>
              <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />
              <InfoWindow onClose={this.onInfoWindowClose}>
                <div>
                   "test"
                </div>
          </InfoWindow>
   </Map> 
</div>

//// css code

#mapBox div:first-child {
    position: relative !important;
    height: 500px !important;
}

Upvotes: 3

Related Questions