Google-maps-react: Map page getting scrolled,Even when map is only 50% height of the page

[jose2007kj]

My component page

import { Component } from 'preact';
import {style} from './style';
import Map, { GoogleApiWrapper, Marker, InfoWindow } from 'google-maps-react';

class MapContainer extends Component {
  constructor(props) {

    super(props);
    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {},
    }


    this.onMarkerClick = this.onMarkerClick.bind(this);
    this.onMapClicked = this.onMapClicked.bind(this);
  }

  onMarkerClick = (props, marker, e) => {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  };
  onMouseoverMarker =(props, marker, e)=> {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  };

  onMapClicked = (props) => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: true,
        activeMarker: null
      })
    }
  };

  render() {
    return (

      <Map
        google={this.props.google}
        onClick={this.onMapClicked}
        style={{width:'50%', height: '50%',position: 'relative'}}
        zoom={11}
        center={{
          lat: 9.924071,
          lng: 76.358376,
        }}>
        <Marker
          onClick={this.onMarkerClick}
          onMouseover={this.onMouseoverMarker}
          name={'ARAM '}
          position={{lat: 89.900005, lng: 96.384455}}
        />
        <Marker
          onClick={this.onMarkerClick}
          onMouseover={this.onMouseoverMarker}
          name={'ARAM'}
          position={{lat: 90.949685, lng: 96.344408}}
        />

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}>
          <h1>
            {this.state.selectedPlace.name}
          </h1>
        </InfoWindow>
      </Map>
    )
  };
}

export default GoogleApiWrapper({
  apiKey: 'AIzaooBZKs1IZMk46f8n8sVv6-ZlWi-KvZ5W6xE',
})(MapContainer)

My app.js

`import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Header from './header';
import Nav from './nav';
import Home from '../routes/home';
import Rewards from '../routes/rewards';
import More from '../routes/more';
import Location from '../routes/location';
import Toast from '../lib/toast';
// import Home from 'async!./home';
// import Profile from 'async!./profile';
export default class App extends Component {
    /** Gets fired when the route changes.
     *  @param {Object} event       "change" event from [preact-router](http://git.io/preact-router)
     *  @param {string} event.url   The newly routed URL
     */
    handleRoute = e => {
        this.currentUrl = e.url;
    };
    componentDidMount() {
        if (typeof window != "undefined" &&
            "serviceWorker" in navigator) {
            navigator.serviceWorker.register('./sw.js').then(() => {
                    console.log('sw registered in app');
                });
        }
        if (typeof window != "undefined") {
            window.addEventListener('online', this.onlineMode);
            window.addEventListener('offline', this.offlineMode);
        }
    }
    render() {
        return (
            <div id="app">
                <Header />
                <div id="content">
                    <Router onChange={this.handleRoute}>
                        <Home path="/" />
                        <Rewards path="/rewards" />
                        <Location path="/location" id="Location" />
                        <More path="/more" />
                        </Router>
                </div>
                <div id="toast"></div>
            </div>
        );
    }
}

and i am using the map component in this page

import { h, Component } from 'preact';
import style from './style';

import GoogleApiWrapper from '../../components/maps';

export default class Location extends Component {

render () {

    return (

      <GoogleApiWrapper />


        );
  }
}

sir,My Location page is scollable,even when no full content is available,.....when map component is removed its working fine.....where i might be going wrong

[patelrohan]

        const style = { // MUST specify dimensions of the Google map or it will not work. Also works best when style is specified inside the render function and created as an object
            width: '100vw', // 90vw basically means take up 90% of the width screen. px also works.
            height: '280px' // 75vh similarly will take up roughly 75% of the height of the screen. px also works.  
        }

instead of % maybe try px or vw&vh maybe? I had similar issue and above styling solved it

[Sh3nr0n]

I have the same issue here.
I found out that the "Map" component renders a "div" element with the following style : {position:'absolute', width:'100%', height:'100%'}.
I couldn't find a way to override it, using the "style" hook from the "Map" component doesn't work as it renders in another "div" element right below the previous one.
It seems that the following lines (from 117 to 122) from the "index.js" file are responsible for this behaviour :

 var mapStyles = {
    container: {
      position: 'absolute',
      width: '100%',
      height: '100%'
    },

Could you provide a fix please?
Thanks

[Hoopes31]

I found out that the "Map" component renders a "div" element with the following style : {position:'absolute', width:'100%', height:'100%'}.

Commenting out lines 179-183 & 185 in _dist > index.js_ removed the issue.

[lukapeharda]

You can override container styles and fix this without commenting out the code.

<Map ... containerStyle={{ width: '100%', height: '300px', position: 'relative' }} ... </Map>

[luisfellipe7]

When I add the containerStyle={{ width: '100%', height: '300px', position: 'relative' }} to the

const style = { width: '50%', height: '100%', } ... <Map google={this.props.google} containerStyle={{ width: '100%', height: '400px', position: 'relative' }} style={style} zoom={11} initialCenter={this.state.location}

[rawphp]

Same here. Adding containerStyle the map is not visible