Merge pull request #144 from carsy/master

Add class name to marker

src/google_map_markers.js

@@ -247,7 +247,11 @@ export default class GoogleMapMarkers extends Component {
       };
 
       return (
-        <div key={childKey} style={{...style, ...stylePtPos}}>
+        <div
+          key={childKey}
+          style={{...style, ...stylePtPos}}
+          className={child.props.$markerHolderClassName}
+        >
           {React.cloneElement(child, {
             $hover: childKey === this.state.hoverKey,
             $getDimensions: this._getDimensions,

test/components/GoogleMap.spec.js

@@ -175,4 +175,86 @@ describe('Components', () => {
       key: API_KEY,
     });
   });
+
+  it('Should add a className to the marker from $markerHolderClassName', () => {
+    const markerHolderClassName = 'marker-holder-class-name';
+
+    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
+      static propTypes = {
+        center: PropTypes.array,
+        zoom: PropTypes.number,
+        greatPlaceCoords: PropTypes.any,
+      };
+
+      static defaultProps = {
+        center: [59.938043, 30.337157],
+        zoom: 9,
+      };
+
+      constructor(props) {
+        super(props);
+      }
+
+      render() {
+        return (
+           <GoogleMap
+            center={this.props.center}
+            zoom={this.props.zoom}
+          >
+            <div lat={59.955413} lng={30.337844} $markerHolderClassName={markerHolderClassName} />
+          </GoogleMap>
+        );
+      }
+    }
+
+    const mapHolder = TestUtils.renderIntoDocument(
+      <MapHolder />
+    );
+
+    const marker = TestUtils
+        .findRenderedDOMComponentWithClass(mapHolder, 'marker-holder-class-name');
+    expect(marker.className).toEqual('marker-holder-class-name');
+    expect(marker.style.left).toEqual('0.250129066669615px');
+    expect(marker.style.top).toEqual('-12.62811732746195px');
+  });
+
+  it('Should not add a className to the marker if $markerHolderClassName is not present', () => {
+    class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
+      static propTypes = {
+        center: PropTypes.array,
+        zoom: PropTypes.number,
+        greatPlaceCoords: PropTypes.any,
+      };
+
+      static defaultProps = {
+        center: [59.938043, 30.337157],
+        zoom: 9,
+      };
+
+      constructor(props) {
+        super(props);
+      }
+
+      render() {
+        return (
+           <GoogleMap
+            center={this.props.center}
+            zoom={this.props.zoom}
+          >
+            <div className="marker-class-name" lat={59.955413} lng={30.337844}/>
+          </GoogleMap>
+        );
+      }
+    }
+
+    const mapHolder = TestUtils.renderIntoDocument(
+      <MapHolder />
+    );
+
+    const marker = TestUtils
+        .findRenderedDOMComponentWithClass(mapHolder, 'marker-class-name');
+    expect(marker.parentNode.className).toNotExist();
+    expect(marker.parentNode.style.left).toEqual('0.250129066669615px');
+    expect(marker.parentNode.style.top).toEqual('-12.62811732746195px');
+  });
 });