Google-maps-react: styling is overwritten from the javascript

[Szarko]

I am not sure how you managed to apply the styles in the yelp clone demo.

The JS keeps applying 100% to width and height and position: absolute every time a Map is rendered.

[auser]

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?

[Szarko]

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.

[auser]

Sure. Wanna try a PR, @Szarko ?

[auser]

bump ^^

[TheMaverickProgrammer]

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'.

[rhiroy]

@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'>

[TheMaverickProgrammer]

No I wrote my own

[auser]

    I’ll remove the default styling in the js and leave it up to the user to define styles. 



    Cheers!

Ari Lernercurl -IL http://ari.io

On Wed, Sep 27, 2017 at 1:11 PM -0700, "Maverick Peppers" [e-mail] wrote:

No I wrote my own

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[oScape]

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.

[danZheng1993]

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;
}

[ionutale]

No I wrote my own

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