Feature/add marker with label

.editorconfig

@@ -10,7 +10,7 @@ insert_final_newline = true
 
 # Matches multiple files with brace expansion notation
 # Set default charset
-[*.{js,py}]
+[*.{js,py,jsx}]
 charset = utf-8
 
 # 4 space indentation
@@ -23,7 +23,7 @@ indent_size = 4
 indent_style = tab
 
 # Indentation override for all JS under lib directory
-[*.js]
+[*.{js,jsx}]
 indent_style = space
 indent_size = 2
 

.gitignore

@@ -2,6 +2,7 @@
 
 ### Editor
 *.swp
+.idea
 
 ### Node ###
 # Logs

package.json

@@ -116,6 +116,7 @@
     "invariant": "^2.2.1",
     "lodash": "^4.16.2",
     "marker-clusterer-plus": "^2.1.4",
+    "markerwithlabel": "^2.0.1",
     "prop-types": "^15.5.8",
     "recompose": "^0.25.0",
     "scriptjs": "^2.5.8",

src/components/BicyclingLayer.md

@@ -11,7 +11,7 @@ import {
 
 const MapWithABicyclingLayer = compose(
   withProps({
-    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
+    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
     loadingElement: <div style={{ height: `100%` }} />,
     containerElement: <div style={{ height: `400px` }} />,
     mapElement: <div style={{ height: `100%` }} />,
@@ -43,7 +43,7 @@ const {
 
 const MapWithABicyclingLayer = compose(
   withProps({
-    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
+    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
     loadingElement: <div style={{ height: `100%` }} />,
     containerElement: <div style={{ height: `400px` }} />,
     mapElement: <div style={{ height: `100%` }} />,

src/components/GroundOverlay.md

@@ -29,7 +29,7 @@ const MapWithGroundOverlay = compose(
 );
 
 <MapWithGroundOverlay
-  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing.places"
+  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
   loadingElement={<div style={{ height: `100%` }} />}
   containerElement={<div style={{ height: `400px` }} />}
   mapElement={<div style={{ height: `100%` }} />}

src/components/addons/MarkerWithLabel.md

@@ -0,0 +1,75 @@
+### Usage
+
+```jsx static
+import { compose } from "recompose";
+import {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+} from "react-google-maps";
+
+import MarkerWithLabel from "react-google-maps/lib/components/addons/MarkerWithLabel";
+
+const MapWithAMarkerWithLabel = compose(
+  withScriptjs,
+  withGoogleMap
+)(props =>
+  <GoogleMap
+    defaultZoom={8}
+    defaultCenter={{ lat: -34.397, lng: 150.644 }}
+  >
+    <MarkerWithLabel
+      position={{ lat: -34.397, lng: 150.644 }}
+      labelAnchor={new google.maps.Point(0, 0)}
+      labelStyle={{backgroundColor: "yellow", fontSize: "32px", padding: "16px"}}
+    >
+      <div>Hello There!</div>
+    </MarkerWithLabel>
+  </GoogleMap>
+);
+
+<MapWithAMarkerWithLabel
+  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
+  loadingElement={<div style={{ height: `100%` }} />}
+  containerElement={<div style={{ height: `400px` }} />}
+  mapElement={<div style={{ height: `100%` }} />}
+/>
+```
+
+### Map with a MarkerWithLabel
+
+```jsx
+const { compose } = require("recompose");
+const {
+  withScriptjs,
+  withGoogleMap,
+  GoogleMap,
+} = require("../../index");
+
+const { MarkerWithLabel } = require("./MarkerWithLabel");
+
+const MapWithAMarkerWithLabel = compose(
+  withScriptjs,
+  withGoogleMap
+)(props =>
+  <GoogleMap
+    defaultZoom={8}
+    defaultCenter={{ lat: -34.397, lng: 150.644 }}
+  >
+    <MarkerWithLabel
+      position={{ lat: -34.397, lng: 150.644 }}
+      labelAnchor={new google.maps.Point(0, 0)}
+      labelStyle={{backgroundColor: "yellow", fontSize: "32px", padding: "16px"}}
+    >
+      <div>Hello There!</div>
+    </MarkerWithLabel>
+  </GoogleMap>
+);
+
+<MapWithAMarkerWithLabel
+  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
+  loadingElement={<div style={{ height: `100%` }} />}
+  containerElement={<div style={{ height: `400px` }} />}
+  mapElement={<div style={{ height: `100%` }} />}
+/>
+```

src/constants.js

@@ -4,6 +4,8 @@ export const MAP = `__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`
 
 export const MARKER = `__SECRET_MARKER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`
 
+export const MARKER_WITH_LABEL = `__SECRET_MARKER_WITH_LABEL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`
+
 export const RECTANGLE = `__SECRET_RECTANGLE_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`
 
 export const POLYLINE = `__SECRET_POLYLINE_DO_NOT_USE_OR_YOU_WILL_BE_FIRED`

src/macros/Marker.jsx

@@ -36,31 +36,6 @@ export class Marker extends React.PureComponent {
      * @see https://github.com/mikesaidani/marker-clusterer-plus
      */
     noRedraw: PropTypes.bool,
-    /**
-     * For `MarkerWithLabel`
-     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
-     */
-    markerWithLabel: PropTypes.func,
-    /**
-     * For `MarkerWithLabel`
-     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
-     */
-    labelClass: PropTypes.string,
-    /**
-     * For `MarkerWithLabel`
-     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
-     */
-    labelAnchor: PropTypes.object,
-    /**
-     * For `MarkerWithLabel`
-     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
-     */
-    labelContent: PropTypes.string,
-    /**
-     * For `MarkerWithLabel`
-     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
-     */
-    labelStyle: PropTypes.object,
   }
 
   static contextTypes = {
@@ -77,8 +52,7 @@ export class Marker extends React.PureComponent {
    */
   constructor(props, context) {
     super(props, context)
-    const GMKlass = this.props.markerWithLabel || google.maps.Marker
-    const marker = new GMKlass()
+    const marker = new google.maps.Marker()
     construct(Marker.propTypes, updaterMap, this.props, marker)
     const markerClusterer = this.context[MARKER_CLUSTERER]
     if (markerClusterer) {
@@ -133,11 +107,4 @@ export default Marker
 
 const eventMap = {}
 
-const updaterMap = {
-  /*
-   * @see https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
-   */
-  labelContent(instance, labelContent) {
-    instance.set(`labelContent`, labelContent)
-  },
-}
+const updaterMap = {}

src/macros/addons/MarkerWithLabel.jsx

@@ -0,0 +1,184 @@
+/* global google */
+import React from "react"
+import PropTypes from "prop-types"
+import makeMarkerWithLabel from "markerwithlabel"
+import ReactDOM from "react-dom"
+
+import {
+  componentDidMount,
+  componentDidUpdate,
+  componentWillUnmount,
+  construct,
+} from "../../utils/MapChildHelper"
+
+import { MAP, MARKER_CLUSTERER, MARKER_WITH_LABEL } from "../../constants"
+
+export const __jscodeshiftPlaceholder__ = `{
+  "KlassNameOverrride": "Marker",
+  "eventMapOverrides": {
+    "onDblClick": "dblclick",
+    "onDragEnd": "dragend",
+    "onDragStart": "dragstart",
+    "onMouseDown": "mousedown",
+    "onMouseOut": "mouseout",
+    "onMouseOver": "mouseover",
+    "onMouseUp": "mouseup",
+    "onRightClick": "rightclick"
+  },
+  "getInstanceFromComponent": "this.state[MARKER_WITH_LABEL]"
+}`
+
+/**
+ * @url https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+ */
+export class MarkerWithLabel extends React.PureComponent {
+  static propTypes = {
+    __jscodeshiftPlaceholder__: null,
+    /**
+     * It will be `MarkerWithLabel#labelContent`.
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    children: PropTypes.node,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelAnchor: PropTypes.object,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelClass: PropTypes.string,
+    /**
+     * For `MarkerWithLabel`. This is for native JS style object, so you may
+     * expect some React shorthands for inline styles not working here.
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelStyle: PropTypes.object,
+    /**
+     * For `MarkerWithLabel`
+     * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+     */
+    labelVisible: PropTypes.bool,
+    /**
+     * For the 2nd argument of `MarkerCluster#addMarker`
+     * @see https://github.com/mikesaidani/marker-clusterer-plus
+     */
+    noRedraw: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    labelVisible: true,
+  }
+
+  static contextTypes = {
+    [MAP]: PropTypes.object,
+    [MARKER_CLUSTERER]: PropTypes.object,
+  }
+
+  /*
+   * @url https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+   */
+  constructor(props, context) {
+    super(props, context)
+    const NativeMarkerWithLabel = makeMarkerWithLabel(google.maps)
+    const markerWithLabel = new NativeMarkerWithLabel()
+    construct(
+      MarkerWithLabel.propTypes,
+      updaterMap,
+      this.props,
+      markerWithLabel
+    )
+    const markerClusterer = this.context[MARKER_CLUSTERER]
+    if (markerClusterer) {
+      markerClusterer.addMarker(markerWithLabel, !!this.props.noRedraw)
+    } else {
+      markerWithLabel.setMap(this.context[MAP])
+    }
+    this.state = {
+      [MARKER_WITH_LABEL]: markerWithLabel,
+    }
+  }
+
+  componentDidMount() {
+    componentDidMount(this, this.state[MARKER_WITH_LABEL], eventMap)
+    const container = document.createElement(`div`)
+    ReactDOM.unstable_renderSubtreeIntoContainer(
+      this,
+      React.Children.only(this.props.children),
+      container
+    )
+    this.state[MARKER_WITH_LABEL].set(`labelContent`, container)
+  }
+
+  componentDidUpdate(prevProps) {
+    componentDidUpdate(
+      this,
+      this.state[MARKER_WITH_LABEL],
+      eventMap,
+      updaterMap,
+      prevProps
+    )
+    if (this.props.children !== prevProps.children) {
+      ReactDOM.unstable_renderSubtreeIntoContainer(
+        this,
+        React.Children.only(this.props.children),
+        this.state[MARKER_WITH_LABEL].get("labelContent")
+      )
+    }
+  }
+
+  componentWillUnmount() {
+    componentWillUnmount(this)
+    const markerWithLabel = this.state[MARKER_WITH_LABEL]
+    if (markerWithLabel) {
+      const markerClusterer = this.context[MARKER_CLUSTERER]
+      if (markerClusterer) {
+        markerClusterer.removeMarker(markerWithLabel, !!this.props.noRedraw)
+      }
+      if (markerWithLabel.get("labelContent")) {
+        ReactDOM.unmountComponentAtNode(markerWithLabel.get("labelContent"))
+      }
+      markerWithLabel.setMap(null)
+    }
+  }
+
+  render() {
+    return false
+  }
+}
+
+export default MarkerWithLabel
+
+const eventMap = {}
+
+const updaterMap = {
+  /**
+   * For `MarkerWithLabel`
+   * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+   */
+  labelAnchor(instance, labelAnchor) {
+    instance.set(`labelAnchor`, labelAnchor)
+  },
+  /**
+   * For `MarkerWithLabel`
+   * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+   */
+  labelClass(instance, labelClass) {
+    instance.set(`labelClass`, labelClass)
+  },
+  /**
+   * For `MarkerWithLabel`
+   * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+   */
+  labelStyle(instance, labelStyle) {
+    instance.set(`labelStyle`, labelStyle)
+  },
+  /**
+   * For `MarkerWithLabel`
+   * @see https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
+   */
+  labelVisible(instance, labelVisible) {
+    instance.set(`labelVisible`, labelVisible)
+  },
+}