CODEWITHSUNDEEP
javascriptcssreactjsgoogle-mapsreact-google-maps
Freelancer Help
Freelancer Help

Reputation: 191

Unused div is appearing on react google maps and I can't style it

I'm using React Google Maps and I'm trying to style it. I want to place two divs in a container of 100% width. Both of them needs to have 50% width but React Google Maps is adding a div which I can't style it.

GoogleMap.js:

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import css from './GoogleMap.css';

export class GoogleMap extends Component {
  render() {
    return (
      <Map className={css.googleMap} google={this.props.google} zoom={14}>

        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />

        <InfoWindow onClose={this.onInfoWindowClose}>
        </InfoWindow>
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("API"),
})(GoogleMap)

ContactPage.js (here I import the google map):

  <LayoutWrapperMain className={css.staticPageWrapper}>
   <h1 className={css.pageTitle}>Need help? Ask our experts for any help you need.</h1>

  <div className={css.contentWrapper}>

   <ContactForm />

     <GoogleMap />

  </div>

  </LayoutWrapperMain>

GoogleMap.css:

.googleMap {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

And the map is showing good when I add a 50% width to the hidden div from the console, but I can't actually find what is adding that div and how can I style it from the code side. THIS DIV ISN'T IN THE CODE.

Here I show that it works when I add 50% to the unseenable div through console:

enter image description here

I tried adding div around <GoogleMap /> in ContactPage.js, I tried same around <Map> tag but nothing helped.

Im really frustated and couldn't find a fix to this for a few days now, so any help will mean a lot!

This is website on live so you can test it on your own: https://trustmypetsitter.herokuapp.com/contactpage

Upvotes: 3

Views: 1256

Answers (1)

Satej S
Satej S

Reputation: 2156

I'll go ahead and warn you that this is definitely a hacky way of doing it. But it will work with the current structure.

.ContactPage_contentWrapper__2aOFH > div:first-of-type {
    width: 50%;
}

What does it do?

It styles the first div in the specific parent(in this case, the CSS Content Wrapper) to have a width of 50%.

Upvotes: 0

Related Questions