styling is overwritten from the javascript about google-maps-react HOT 11 OPEN

The best way to fix this issue is this.
Apply className to the Map component.
And then define css style to the class.

<Map className="miniMap"/>

In the css file define css rules to the miniMap class

.miniMap {
  position: relative !important;
  with: 100% !important;
  height: 400px !important;
}

from google-maps-react.

Anyone know how to remove the width and height 100% on the parent div ?
I override the styles but it recreate a parent div to override my override.

from google-maps-react.

from google-maps-react.

Ah, yes... this is inside the component itself here: https://github.com/fullstackreact/google-maps-react/blob/master/src/index.js#L177

You can override this default or perhaps it makes sense to create an option to apply these styles conditionally.

What do you think?

from google-maps-react.

I think a flag that is passable to the option is a good idea, if it is passed false it will apply no styles from the source component.

Thank you for your response. Great work with this.

from google-maps-react.

Sure. Wanna try a PR, @Szarko ?

from google-maps-react.

bump ^^

from google-maps-react.

Did anyone fix this? I can't for the life of me set the position to 'relative'. Would fix all my problems. Tried changing the css, internal css, and it keeps forcing 'absolute'.

from google-maps-react.

@TheMaverickProgrammer did you manage to fix it? I struggled with this for a while but made it work. I took out the const style from Container and just put style={{height: '100vh', width: '100vw'}} directly into the render function in Map, on the line above 'Loading map...." and below <div ref='map'>

from google-maps-react.

No I wrote my own

from google-maps-react.

No I wrote my own

hey @TheMaverickProgrammer can you publish the source code for the map component?

from google-maps-react.