Merge pull request #167 from lepirlouit/master

add more options to the components

Author: auser

dist/components/HeatMap.js

@@ -28,6 +28,32 @@
     };
   }
 
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  function _objectWithoutProperties(obj, keys) {
+    var target = {};
+
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -135,27 +161,30 @@
             mapCenter = _props.mapCenter,
             icon = _props.icon,
             gradient = _props.gradient,
-            radius = _props.radius,
-            opacity = _props.opacity;
-
+            _props$radius = _props.radius,
+            radius = _props$radius === undefined ? 20 : _props$radius,
+            _props$opacity = _props.opacity,
+            opacity = _props$opacity === undefined ? 0.2 : _props$opacity,
+            props = _objectWithoutProperties(_props, ['map', 'google', 'positions', 'mapCenter', 'icon', 'gradient', 'radius', 'opacity']);
 
         if (!google) {
           return null;
         }
 
-        positions = positions.map(function (pos) {
+        var data = positions.map(function (pos) {
           return new google.maps.LatLng(pos.lat, pos.lng);
         });
 
-        var pref = {
+        var pref = _extends({
           map: map,
-          data: positions
-        };
+          gradient: gradient,
+          radius: radius,
+          opacity: opacity,
+          data: data
+        }, props);
 
         this.heatMap = new google.maps.visualization.HeatmapLayer(pref);
 
-        this.heatMap.set('gradient', gradient);
-
         this.heatMap.set('radius', radius === undefined ? 20 : radius);
 
         this.heatMap.set('opacity', opacity === undefined ? 0.2 : opacity);

dist/components/InfoWindow.js

@@ -32,6 +32,32 @@
     };
   }
 
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  function _objectWithoutProperties(obj, keys) {
+    var target = {};
+
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -128,16 +154,16 @@
         var _props2 = this.props,
             map = _props2.map,
             google = _props2.google,
-            mapCenter = _props2.mapCenter;
-
+            mapCenter = _props2.mapCenter,
+            props = _objectWithoutProperties(_props2, ['map', 'google', 'mapCenter']);
 
         if (!google || !google.maps) {
           return;
         }
 
-        var iw = this.infowindow = new google.maps.InfoWindow({
+        var iw = this.infowindow = new google.maps.InfoWindow(_extends({
           content: ''
-        });
+        }, props));
 
         google.maps.event.addListener(iw, 'closeclick', this.onClose.bind(this));
         google.maps.event.addListener(iw, 'domready', this.onOpen.bind(this));

dist/components/Marker.js

@@ -28,6 +28,32 @@
     };
   }
 
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  function _objectWithoutProperties(obj, keys) {
+    var target = {};
+
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -136,25 +162,26 @@
             icon = _props.icon,
             label = _props.label,
             draggable = _props.draggable,
-            title = _props.title;
+            title = _props.title,
+            props = _objectWithoutProperties(_props, ['map', 'google', 'position', 'mapCenter', 'icon', 'label', 'draggable', 'title']);
 
         if (!google) {
           return null;
         }
 
         var pos = position || mapCenter;
         if (!(pos instanceof google.maps.LatLng)) {
-          position = new google.maps.LatLng(pos.lat, pos.lng);
+          pos = new google.maps.LatLng(pos.lat, pos.lng);
         }
 
-        var pref = {
+        var pref = _extends({
           map: map,
-          position: position,
+          position: pos,
           icon: icon,
           label: label,
           title: title,
           draggable: draggable
-        };
+        }, props);
         this.marker = new google.maps.Marker(pref);
 
         evtNames.forEach(function (e) {

dist/components/Polygon.js

@@ -28,6 +28,32 @@
     };
   }
 
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  function _objectWithoutProperties(obj, keys) {
+    var target = {};
+
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -136,22 +162,22 @@
             strokeOpacity = _props.strokeOpacity,
             strokeWeight = _props.strokeWeight,
             fillColor = _props.fillColor,
-            fillOpacity = _props.fillOpacity;
-
+            fillOpacity = _props.fillOpacity,
+            props = _objectWithoutProperties(_props, ['map', 'google', 'paths', 'strokeColor', 'strokeOpacity', 'strokeWeight', 'fillColor', 'fillOpacity']);
 
         if (!google) {
           return null;
         }
 
-        var params = {
+        var params = _extends({
           map: map,
           paths: paths,
           strokeColor: strokeColor,
           strokeOpacity: strokeOpacity,
           strokeWeight: strokeWeight,
           fillColor: fillColor,
           fillOpacity: fillOpacity
-        };
+        }, props);
 
         this.polygon = new google.maps.Polygon(params);
 

dist/components/Polyline.js

@@ -28,6 +28,32 @@
     };
   }
 
+  var _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  function _objectWithoutProperties(obj, keys) {
+    var target = {};
+
+    for (var i in obj) {
+      if (keys.indexOf(i) >= 0) continue;
+      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+      target[i] = obj[i];
+    }
+
+    return target;
+  }
+
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -131,23 +157,23 @@
         var _props = this.props,
             map = _props.map,
             google = _props.google,
-            paths = _props.paths,
+            path = _props.path,
             strokeColor = _props.strokeColor,
             strokeOpacity = _props.strokeOpacity,
-            strokeWeight = _props.strokeWeight;
-
+            strokeWeight = _props.strokeWeight,
+            props = _objectWithoutProperties(_props, ['map', 'google', 'path', 'strokeColor', 'strokeOpacity', 'strokeWeight']);
 
         if (!google) {
           return null;
         }
 
-        var params = {
+        var params = _extends({
           map: map,
-          paths: paths,
+          path: path,
           strokeColor: strokeColor,
           strokeOpacity: strokeOpacity,
           strokeWeight: strokeWeight
-        };
+        }, props);
 
         this.polyline = new google.maps.Polyline(params);
 
@@ -185,7 +211,7 @@
   }(_react2.default.Component);
 
   Polyline.propTypes = {
-    paths: _propTypes2.default.array,
+    path: _propTypes2.default.array,
     strokeColor: _propTypes2.default.string,
     strokeOpacity: _propTypes2.default.number,
     strokeWeight: _propTypes2.default.number

examples/components/withPolylines.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import Map, {GoogleApiWrapper} from '../../src/index'
+import Polyline from '../../src/components/Polyline'
+
+const WithPolylines = React.createClass({
+  render: function() {
+    if (!this.props.loaded) {
+      return <div>Loading...</div>
+    }
+
+    const polyline = [
+      { lat: 37.789411, lng: -122.422116 },
+      { lat: 37.785757, lng: -122.421333 },
+      { lat: 37.789352, lng: -122.415346 }
+    ]
+
+    return (
+      <Map google={this.props.google}
+          style={{width: '100%', height: '100%', position: 'relative'}}
+          className={'map'}
+          zoom={14}>
+          <Polyline
+            path={polyline}
+            strokeColor="#0000FF"
+            strokeOpacity={0.8}
+            strokeWeight={2}
+            fillColor="#0000FF"
+            fillOpacity={0.35} />
+      </Map>
+    )
+  }
+});
+
+export default WithPolylines

examples/index.js

@@ -34,6 +34,10 @@ const routeMap = {
   'polygons': {
     name: 'Polygon',
     component: require('./components/withPolygons').default
+  },
+  'polyline': {
+    name: 'Polyline',
+    component: require('./components/withPolylines').default
   }
 }