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>
);
}
}
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
Most helpful comment
The issue was here
This needs to be