CODEWITHSUNDEEP
javascriptgoogle-mapsreactjs
ckim16
ckim16

Reputation: 1749

Uncaught TypeError: Cannot read property 'props' of null in react with google-maps

I'm using google-maps-react and react to display some data on the map and now I'm at the point where I want to display tooltip when marker is clicked or hovered. For that, I think I can use 'InfoWindown' component that comes with the google-maps-react but it gives me a error 'cannot read property 'props' of null.

Here is my code..

import React, { Component } from 'react';
import Map, { Marker, InfoWindow } from 'google-maps-react';

export default class GoogleMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    };

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

  onMarkerClick(props, marker, e) {
    this.setState({
      selectedPlace: props,
      activeMarker: marker
    });
  } 

  renderTrucks() { 
    if (this.props.list.length === 0) {
      return;
    }   
    return this.props.list.map((truckInfo) => {
      return (<Marker
        key={truckInfo.objectid}
        name={truckInfo.applicant}
        onClick={this.onMarkerClick}
        position={{lat:truckInfo.latitude, lng:truckInfo.longitude}} />
      );
    });
  }


  render() {
    return (
      <Map google={window.google}
        className={'map'}
        style={{width: '50%', height: '80%', position: 'relative'}}
        zoom={13}>
        {this.renderTrucks()}

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

I think all my callback functions are fine but it seems to me that 'InfoWindow' component is the one that gives me a trouble. Anyone know how to use this thing?

Thank you,

Upvotes: 1

Views: 1681

Answers (1)

nightlyop
nightlyop

Reputation: 7975

I assume the problem is with onClick={this.onMarkerClick}. this in the callback is not the same as outside of it.

Does it work when using the following code to set the onClick property for the marker?

onClick={(props, marker, e) => this.onMarkerClick(props, marker, e)}

More about arrow functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

An arrow function does not create its own this context, so this has the original meaning from the enclosing context.

Upvotes: 1

Related Questions