Skip to content

Commit d5574a4

Browse files
authored
Adding support for InfoWindow as a child prop
Let's say you want to a simple map with 1 marker and you want to have an InfoWindow open when the component renders. For example, you want a location and you want to show some details about the location in an InfoWindow. InfoWindow requires either a position or a marker, but if you use the position, it will be laid on top of the marker. This change allows the InfoWindow to be passed as a child inside of the Marker and passes on the Marker's marker, google and map to the child. Example: ``` <Marker title="Location" id={1} position={markerCenter} draggable={true} onDragend={this.moveMarker.bind(this)} > <InfoWindow visible={showInfoWindow} style={styles.infoWindow} > <div className={classes.infoWindow}> <p>Click on the map or drag the marker to select location where the incident occurred</p> </div> </InfoWindow> </Marker>
1 parent f3c70a6 commit d5574a4

File tree

1 file changed

+15
-2
lines changed

1 file changed

+15
-2
lines changed

src/components/Marker.js

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, {Fragment} from 'react'
22
import PropTypes from 'prop-types'
33

44
import { camelize } from '../lib/String'
@@ -104,7 +104,20 @@ export class Marker extends React.Component {
104104
}
105105

106106
render() {
107-
return null;
107+
return (
108+
<Fragment>
109+
{this.props.children && this.marker ?
110+
React.Children.only(
111+
React.cloneElement(
112+
this.props.children,
113+
{ marker: this.marker,
114+
google: this.props.google,
115+
map: this.props.map}
116+
)
117+
) : null
118+
}
119+
</Fragment>
120+
)
108121
}
109122
}
110123

0 commit comments

Comments
 (0)