Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Map page getting scrolled,Even when map is only 50% height of the page

See original GitHub issue

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