Open antonk52 opened 7 years ago
I am experiencing this as well. If I move Marker into a sub Component, the pins are no longer displayed on the map. Have you had any luck solving this issue?
The Marker component can't be rendered inside another component since the map does not render its children in the traditional manner. You can get around this by returning the JSX directly to where you need it by calling the render function on a React component or by using a function as I did below.
const CustomMarker = (props) => {
return(
<Marker position={props.location}/>
);
}
render(){
return (
<Map google={this.props.google} zoom={10} initialCenter={{lat: 40.7484, lng: -73.9857}}>
{CustomMarker({location: {lat: 40.7484, lng: -73.9857}})}
</Map>
);
}
}
This issue should remain open though since the original approach is the React way of doing it...
From this https://github.com/fullstackreact/google-maps-react/issues/51 I found that explicitly pass the props from the parent actually work In your case, it would be something like
<UserLocation {...this.props}/>
and in the user-location.jsx
should be like
render() {
let {visible, coord, icon} = this.state;
return visible ?
<Marker
{...this.props}
position={defaultLocation}
icon={icon}
title="Your location"
name="marker name" /> :
null;
}
I'm not sure if this is the right way of doing it
Is there any plans to fix this? I'm seeing similar issues with the InfoWindow as well
Does anyone know how to render a custom component in place of the red pin that the marker gives? Besides the icon
image source prop, I don't see how to render a custom component.
I'd like to do something like Airbnb, where I pass a component as a child of the marker and it renders that instead.
@nandorojo Any luck rendering a custom component?
I have multiple views and on different views I have different maps, however, I need to display user location on every map, I decided to turn it into reusable component that would watch user location and update it when necessery as well as only return the Marker.
An example of a map code
and the contents of
user-location.jsx
With logging I can see that the user location component is mounted and updates, however the icon does not appear on the map.
If I write the userLocation as a simple
Marker
directly inside theMap
I am able to see the dot. Code example belowIs there something I am missing here or the
Marker
component cannot be inside standard react components?Thank you