Google-map-react: Issue with info window and marker

Created on 16 Mar 2018  路  4Comments  路  Source: google-map-react/google-map-react

I am rendering markers on a google map using this library which is working great. I am having an issue with the infowindow, and seeing the following error:

Uncaught TypeError: a.addListener is not a function

See full code below.

Any ideas how to rectify this? Cannot figure it out from the docs.

class Map extends Component {

  onGoogleApiLoaded = ({map, maps}) => {
    this.map = map;
    this.maps = maps;
    this.infowindow = maps.InfoWindow();
    var address = {lat: this.props.address.lat, lng: this.props.address.lng};
    var service = new maps.places.PlacesService(map);
    service.nearbySearch({
      location: address,
      radius: 2000,
      types: ['school']
    }, this.callback);
  }

  callback = (results, status) => {
    for(var i = 0; i < results.length; i++) {
      this.renderMarkers(results[i]);
    }
  }

  renderMarkers = (place) => {
    let marker = new this.maps.Marker({
      position: {lat: parseFloat(place.geometry.location.lat()), lng: parseFloat(place.geometry.location.lng())},
      map: this.map,
      title: 'Hello World!'
    });

    marker.addListener('click', () => {
      this.infowindow.setContent('test');
      this.infowindow.open(this.map, marker);
    });
  }

  render(){
    return  (
        <div style={{height: '100vh'}}>
          <GoogleMapReact
            bootstrapURLKeys={{ 
              key: 'KEY',
              libraries: 'places' 
            }}
            onGoogleApiLoaded={this.onGoogleApiLoaded}
            defaultCenter={[this.props.address.lat, this.props.address.lng)  ]}
            defaultZoom={15}
          />
        </div>
      );
  }
}

Most helpful comment

The issue was here

this.infowindow = maps.InfoWindow();

This needs to be

this.infowindow = new maps.InfoWindow();

All 4 comments

The issue was here

this.infowindow = maps.InfoWindow();

This needs to be

this.infowindow = new maps.InfoWindow();

Hi @Pau1fitz , I'm trying to render a marker's infoWindow following your code above. It seems you have made it working and I'm struggling for hours. Please could you share the full code? Many thanks in advance

@grdpr I don't have the code anymore I am afraid. It should all be above anyway. If you can recreate what you have in a code sandbox I can help you.

@Pau1fitz Great thanks! Here is a sandbox based on your code:
https://codesandbox.io/s/7z62vly9v6?fontsize=14

Was this page helpful?
0 / 5 - 0 ratings

Related issues

robertwt7 picture robertwt7  路  4Comments

rku181 picture rku181  路  4Comments

arunshan picture arunshan  路  5Comments

VLNTNA picture VLNTNA  路  4Comments

SantosOMartinez picture SantosOMartinez  路  4Comments