feat(marker): add custom label support

* Addition of custom label support for <Marker /> along with examples

- Original author: @RGFnaGFuIEd1bmF5
- Original commits: fa96f29, 9aefc2c

public/index.html

@@ -21,6 +21,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css" />
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg"></script>
+    <script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
       /////////////////////////////////////////////////////////////////////////

src/app/App.js

@@ -57,6 +57,7 @@ import {
 
 import {
   MarkerClustererExample,
+  MarkerWithLabelExample
 } from "./pages/addons";
 
 const history = useRouterHistory(createHistory)({
@@ -95,6 +96,7 @@ export default class App extends Component {
           </Route>
           <Route path="addons">
             <Route path="marker-clusterer" component={MarkerClustererExample} />
+            <Route path="marker-with-label" component={MarkerWithLabelExample} />
           </Route>
           <Route path="async" component={PageWithIframeEntry} />
           <Redirect path="*" to="/" />

src/app/containers/Application.js

@@ -107,6 +107,11 @@ export default class Application extends Component {
                   Marker clusterer addon with Marker
                 </MenuItem>
               </LinkContainer>
+              <LinkContainer to="/addons/marker-with-label">
+                <MenuItem>
+                  Marker with Label
+                </MenuItem>
+              </LinkContainer>
             </NavDropdown>
           </Nav>
           <Navbar.Collapse style={{ marginRight: 100 }}>

src/app/pages/addons/MarkerWithLabelExample.js

@@ -0,0 +1,49 @@
+/* global google */
+
+import {
+  default as React,
+  Component,
+} from "react";
+
+import {
+  withGoogleMap,
+  GoogleMap,
+  Marker,
+} from "../../../lib";
+
+import "./markerWithLabel.css"
+
+const MarkerWithLabelExampleMap = withGoogleMap(props => (
+  <GoogleMap
+    defaultZoom={3}
+    defaultCenter={{lat: 25.0391667, lng: 121.525}}
+  >
+    <Marker
+      markerWithLabel={window.MarkerWithLabel}
+      position={{
+        lat: 25.0391667,
+        lng: 121.525,
+      }}
+      opacity={0}
+      labelClass="map-price-container"
+      labelAnchor={new google.maps.Point(35, 27)}
+      labelContent={`<div class="map-price-marker "><span>$135,123.00</span></div>`}
+      labelStyle={{opacity: 0.8}}
+    />
+  </GoogleMap>
+));
+
+export default class MarkerWithLabelExample extends Component {
+  render() {
+    return (
+      <MarkerWithLabelExampleMap
+        containerElement={
+          <div style={{ height: `100%` }} />
+        }
+        mapElement={
+          <div style={{ height: `100%` }} />
+        }
+      />
+    )
+  }
+}

src/app/pages/addons/index.js

@@ -1,7 +1,10 @@
 import MarkerClustererExample from "./MarkerClustererExample";
+import MarkerWithLabelExample from "./MarkerWithLabelExample";
 
 MarkerClustererExample.__raw = require(`!raw!./MarkerClustererExample`);
+MarkerWithLabelExample.__raw = require(`!raw!./MarkerWithLabelExample`);
 
 export {
   MarkerClustererExample,
+  MarkerWithLabelExample,
 };

src/app/pages/addons/markerWithLabel.css

@@ -0,0 +1,96 @@
+
+.map-price-container {
+    overflow: visible !important;
+}
+
+.map-price-marker {
+    position: relative;
+    width: 70px;
+    height: 21px;
+    border-radius: 3px;
+    line-height: 22px;
+    background-color: #52ca46;
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.07);
+    text-align: center;
+    color: #fff;
+    font-size: 11px;
+    font-family: MuseoSans;
+    font-weight: 700;
+    user-select: none;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #3e9435;
+    z-index: 1;
+}
+.map-price-marker:before,
+.map-price-marker:after {
+    position: absolute;
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    display: block;
+}
+
+.map-price-marker:after {
+    left: 31px;
+    top: 19px;
+    border-width: 5px;
+    border-color: #52ca46 transparent transparent;
+}
+
+.map-price-marker:before {
+    left: 30px;
+    top: 20px;
+    border-width: 6px;
+    border-color: #3e9435 transparent transparent;
+}
+
+.map-price-marker.visited {
+    background-color: #fff;
+    color: #7b8d93;
+    border-color: #7b8d93;
+}
+
+.map-price-marker.visited:after {
+    border-color: #fff transparent transparent;
+}
+
+.map-price-marker.visited:before {
+    border-color: #7b8d93 transparent transparent;
+}
+
+.map-price-marker.visited.active,
+.map-price-marker.visited:hover {
+    background-color: #7b8d93;
+    color: #fff;
+    border-color: #5b6a6f;
+}
+
+.map-price-marker.visited.active:after,
+.map-price-marker.visited:hover:after {
+    border-color: #7b8d93 transparent transparent;
+}
+
+.map-price-marker.visited.active:before,
+.map-price-marker.visited:hover:before {
+    border-color: #5b6a6f transparent transparent;
+}
+
+.map-price-marker.active,
+.map-price-marker:hover {
+    background-color: #3e9435;
+    color: #fff;
+    border-color: #3e9435;
+    z-index: 3;
+}
+
+.map-price-marker.active:after,
+.map-price-marker:hover:after {
+    border-color: #3e9435 transparent transparent;
+}
+
+.map-price-marker.active:before,
+.map-price-marker:hover:before {
+    border-color: #3e9435 transparent transparent;
+}

src/lib/Marker.js

@@ -43,6 +43,16 @@ const controlledPropTypes = {
 
   label: PropTypes.any,
 
+  markerWithLabel: PropTypes.func,
+
+  labelClass: PropTypes.string,
+
+  labelAnchor: PropTypes.object,
+
+  labelContent: PropTypes.string,
+
+  labelStyle: PropTypes.object,
+
   noRedraw: PropTypes.bool,
 
   opacity: PropTypes.number,
@@ -117,66 +127,134 @@ const publicMethodMap = {
   //
   // [].map.call($0.querySelectorAll("tr>td>code"), function(it){ return it.textContent; })
   //    .filter(function(it){ return it.match(/^get/) && !it.match(/Map$/); })
-  getAnimation(marker) { return marker.getAnimation(); },
+  getAnimation(marker) {
+    return marker.getAnimation();
+  },
 
-  getAttribution(marker) { return marker.getAttribution(); },
+  getAttribution(marker) {
+    return marker.getAttribution();
+  },
 
-  getClickable(marker) { return marker.getClickable(); },
+  getClickable(marker) {
+    return marker.getClickable();
+  },
 
-  getCursor(marker) { return marker.getCursor(); },
+  getCursor(marker) {
+    return marker.getCursor();
+  },
 
-  getDraggable(marker) { return marker.getDraggable(); },
+  getDraggable(marker) {
+    return marker.getDraggable();
+  },
 
-  getIcon(marker) { return marker.getIcon(); },
+  getIcon(marker) {
+    return marker.getIcon();
+  },
 
-  getLabel(marker) { return marker.getLabel(); },
+  getLabel(marker) {
+    return marker.getLabel();
+  },
 
-  getOpacity(marker) { return marker.getOpacity(); },
+  getOpacity(marker) {
+    return marker.getOpacity();
+  },
 
-  getPlace(marker) { return marker.getPlace(); },
+  getPlace(marker) {
+    return marker.getPlace();
+  },
 
-  getPosition(marker) { return marker.getPosition(); },
+  getPosition(marker) {
+    return marker.getPosition();
+  },
+
+  getShape(marker) {
+    return marker.getShape();
+  },
+
+  getTitle(marker) {
+    return marker.getTitle();
+  },
 
-  getShape(marker) { return marker.getShape(); },
+  getVisible(marker) {
+    return marker.getVisible();
+  },
 
-  getTitle(marker) { return marker.getTitle(); },
+  getZIndex(marker) {
+    return marker.getZIndex();
+  },
 
-  getVisible(marker) { return marker.getVisible(); },
+  // Public Api's
+  // https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
+  getLabelContent(marker) {
+    return marker.get(`labelContent`);
+  },
 
-  getZIndex(marker) { return marker.getZIndex(); },
   // END - Public APIs
 };
 
 const controlledPropUpdaterMap = {
-  animation(marker, animation) { marker.setAnimation(animation); },
+  animation(marker, animation) {
+    marker.setAnimation(animation);
+  },
 
-  attribution(marker, attribution) { marker.setAttribution(attribution); },
+  attribution(marker, attribution) {
+    marker.setAttribution(attribution);
+  },
 
-  clickable(marker, clickable) { marker.setClickable(clickable); },
+  clickable(marker, clickable) {
+    marker.setClickable(clickable);
+  },
 
-  cursor(marker, cursor) { marker.setCursor(cursor); },
+  cursor(marker, cursor) {
+    marker.setCursor(cursor);
+  },
 
-  draggable(marker, draggable) { marker.setDraggable(draggable); },
+  draggable(marker, draggable) {
+    marker.setDraggable(draggable);
+  },
 
-  icon(marker, icon) { marker.setIcon(icon); },
+  icon(marker, icon) {
+    marker.setIcon(icon);
+  },
 
-  label(marker, label) { marker.setLabel(label); },
+  opacity(marker, opacity) {
+    marker.setOpacity(opacity);
+  },
 
-  opacity(marker, opacity) { marker.setOpacity(opacity); },
+  options(marker, options) {
+    marker.setOptions(options);
+  },
 
-  options(marker, options) { marker.setOptions(options); },
+  place(marker, place) {
+    marker.setPlace(place);
+  },
 
-  place(marker, place) { marker.setPlace(place); },
+  position(marker, position) {
+    marker.setPosition(position);
+  },
 
-  position(marker, position) { marker.setPosition(position); },
+  shape(marker, shape) {
+    marker.setShape(shape);
+  },
 
-  shape(marker, shape) { marker.setShape(shape); },
+  title(marker, title) {
+    marker.setTitle(title);
+  },
 
-  title(marker, title) { marker.setTitle(title); },
+  visible(marker, visible) {
+    marker.setVisible(visible);
+  },
+
+  zIndex(marker, zIndex) {
+    marker.setZIndex(zIndex);
+  },
 
-  visible(marker, visible) { marker.setVisible(visible); },
+  // Public Api's
+  // https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/markerwithlabel/src/markerwithlabel.js
+  labelContent(marker, label) {
+    marker.set(`labelContent`, label);
+  },
 
-  zIndex(marker, zIndex) { marker.setZIndex(zIndex); },
 };
 
 function getInstanceFromComponent(component) {
@@ -205,12 +283,13 @@ export default _.flowRight(
 
   getInitialState() {
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
-    const marker = new google.maps.Marker(
+    const Marker = this.props.markerWithLabel || google.maps.Marker;
+    const marker = new Marker(
       collectUncontrolledAndControlledProps(
         defaultUncontrolledPropTypes,
         controlledPropTypes,
         this.props
-      )
+      ),
     );
     const markerClusterer = this.context[MARKER_CLUSTERER];
     if (markerClusterer) {