fix issue allenhwkim#879

Author: allenhwkim

build/docs/index.html

@@ -18,7 +18,7 @@
             </span>          </td>        </tr><tr>          <td class="name" nowrap="">&lt;MapEvent></td>          <td class="type"><span class="param-type">            String          </span></td>          <td class="description last">            <span>              <p><a href="https://developers.google.com/maps/documentation/javascript/reference">Any Shape events</a></p>
             </span>          </td>        </tr>      </tbody>    </table>  </div>  <div>    <h4>Example</h4>    <pre class="prettyprint"><code><span class="str">Usage:
   &lt;map MAP_ATTRIBUTES>
-   &lt;shape name=SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS">&lt;/MARKER>
+   &lt;shape name="SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS">&lt;/shape>
   &lt;/map>
 Example:
   &lt;map zoom="11" center="[40.74, -74.18]">

build/docs/shape.html

@@ -29,6 +29,11 @@
 (function() {
   'use strict';
   var NgMap, $timeout, NavigatorGeolocation;
+  var requestTimeout, routeRequest;
+  // Delay for each route render to accumulate all requests into a single one
+  // This is required for simultaneous origin\waypoints\destination change
+  // 20ms should be enough to merge all request data
+  var routeRenderDelay = 20;
   var getDirectionsRenderer = function(options, events) {
     if (options.panel) {
       options.panel = document.getElementById(options.panel) ||
@@ -50,25 +55,49 @@
       'durationInTraffic', 'waypoints', 'optimizeWaypoints', 
       'provideRouteAlternatives', 'avoidHighways', 'avoidTolls', 'region'
     ];
-    for(var key in request){
-      (validKeys.indexOf(key) === -1) && (delete request[key]);
+    if (request) {
+      for(var key in request) {
+        if (request.hasOwnProperty(key)) {
+          (validKeys.indexOf(key) === -1) && (delete request[key]);
+        }
+      }
     }
     if(request.waypoints) {
-      // Check fo valid values
-      if(request.waypoints == "[]" || request.waypoints === "") {
+      // Check for acceptable values
+      if(!Array.isArray(request.waypoints)) {
         delete request.waypoints;
       }
     }
     var showDirections = function(request) {
-      directionsService.route(request, function(response, status) {
-        if (status == google.maps.DirectionsStatus.OK) {
-          $timeout(function() {
-            renderer.setDirections(response);
-          });
+      if (requestTimeout && request) {
+        if (!routeRequest) {
+          routeRequest = request;
+        } else {
+          for (var attr in request) {
+            if (request.hasOwnProperty(attr)) {
+              routeRequest[attr] = request[attr];
+            }
+          }
         }
-      });
+      } else {
+        requestTimeout = $timeout(function() {
+          if (!routeRequest) {
+            routeRequest = request;
+          }
+          directionsService.route(routeRequest, function(response, status) {
+            if (status == google.maps.DirectionsStatus.OK) {
+              renderer.setDirections(response);
+              // Unset request for the next call
+              routeRequest = undefined;
+            }
+          });
+          $timeout.cancel(requestTimeout);
+          // Unset expired timeout for the next call
+          requestTimeout = undefined;
+        }, routeRenderDelay);
+      }
     };
-    if (request.origin && request.destination) {
+    if (request && request.origin && request.destination) {
       if (request.origin == 'current-location') {
         NavigatorGeolocation.getCurrentPosition().then(function(ll) {
           request.origin = new google.maps.LatLng(ll.coords.latitude, ll.coords.longitude);
@@ -97,6 +126,10 @@
       var options = parser.getOptions(filtered, {scope: scope});
       var events = parser.getEvents(scope, filtered);
       var attrsToObserve = parser.getAttrsToObserve(orgAttrs);
+      var attrsToObserve = [];
+      if (!filtered.noWatcher) {
+          attrsToObserve = parser.getAttrsToObserve(orgAttrs);
+      }
       var renderer = getDirectionsRenderer(options, events);
       mapController.addObject('directionsRenderers', renderer);
       attrsToObserve.forEach(function(attrName) {

build/docs/source/directions.html

@@ -27,7 +27,7 @@
          * set options
          */
         var options = parser.getOptions(filtered, {scope: scope});
-        options.data = $window[attrs.data] || scope[attrs.data];
+        options.data = $window[attrs.data] || parseScope(attrs.data, scope);
         if (options.data instanceof Array) {
           options.data = new google.maps.MVCArray(options.data);
         } else {
@@ -40,6 +40,12 @@
         var events = parser.getEvents(scope, filtered);
         console.log('heatmap-layer options', layer, 'events', events);
         mapController.addObject('heatmapLayers', layer);
+        //helper get nexted path
+        function parseScope( path, obj ) {
+            return path.split('.').reduce( function( prev, curr ) {
+                return prev[curr];
+            }, obj || this );
+        }
       }
      }; // return
   }]);

build/docs/source/heatmap-layer.html

@@ -28,10 +28,20 @@
 (function() {
   'use strict';
   var parser, $timeout, $compile, NgMap;
+  var supportedTransform = (function getSupportedTransform() {
+    var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
+    var div = document.createElement('div');
+    for(var i = 0; i < prefixes.length; i++) {
+      if(div && div.style[prefixes[i]] !== undefined) {
+        return prefixes[i];
+      }
+    }
+    return false;
+  })();
   var CustomMarker = function(options) {
     options = options || {};
     this.el = document.createElement('div');
-    this.el.style.display = 'inline-block';
+    this.el.style.display = 'block';
     this.el.style.visibility = "hidden";
     this.visible = true;
     for (var key in options) { /* jshint ignore:line */
@@ -43,6 +53,8 @@
     CustomMarker.prototype.setContent = function(html, scope) {
       this.el.innerHTML = html;
       this.el.style.position = 'absolute';
+      this.el.style.top = 0;
+      this.el.style.left = 0;
       if (scope) {
         $compile(angular.element(this.el).contents())(scope);
       }
@@ -66,8 +78,12 @@
           var posPixel = _this.getProjection().fromLatLngToDivPixel(_this.position);
           var x = Math.round(posPixel.x - (_this.el.offsetWidth/2));
           var y = Math.round(posPixel.y - _this.el.offsetHeight - 10); // 10px for anchor
-          _this.el.style.left = x + "px";
-          _this.el.style.top = y + "px";
+          if (supportedTransform) {
+            _this.el.style[supportedTransform] = "translate(" + x + "px, " + y + "px)";
+          } else {
+            _this.el.style.left = x + "px";
+            _this.el.style.top = y + "px";
+          }
           _this.el.style.visibility = "visible";
         };
         if (_this.el.offsetWidth && _this.el.offsetHeight) {
@@ -79,14 +95,20 @@
       }
     };
     CustomMarker.prototype.setZIndex = function(zIndex) {
-      zIndex && (this.zIndex = zIndex); /* jshint ignore:line */
-      this.el.style.zIndex = this.zIndex;
+      if (zIndex === undefined) return;
+      (this.zIndex !== zIndex) && (this.zIndex = zIndex); /* jshint ignore:line */
+      (this.el.style.zIndex !== this.zIndex) && (this.el.style.zIndex = this.zIndex);
     };
     CustomMarker.prototype.getVisible = function() {
       return this.visible;
     };
     CustomMarker.prototype.setVisible = function(visible) {
-      this.el.style.display = visible ? 'inline-block' : 'none';
+      if (this.el.style.display === 'none' && visible)
+      {
+          this.el.style.display = 'block';
+      } else if (this.el.style.display !== 'none' && !visible) {
+          this.el.style.display = 'none';
+      }
       this.visible = visible;
     };
     CustomMarker.prototype.addClass = function(className) {
@@ -127,24 +149,27 @@
       element[0].style.display = 'none';
       console.log("custom-marker options", options);
       var customMarker = new CustomMarker(options);
-      $timeout(function() { //apply contents, class, and location after it is compiled
-        scope.$watch('[' + varsToWatch.join(',') + ']', function() {
+      // Do we really need a timeout with $scope.$apply() here?
+      setTimeout(function() { //apply contents, class, and location after it is compiled
+        scope.$watch('[' + varsToWatch.join(',') + ']', function(newVal, oldVal) {
           customMarker.setContent(orgHtml, scope);
         }, true);
         customMarker.setContent(element[0].innerHTML, scope);
-        var classNames = element[0].firstElementChild.className;
+        var classNames =
+          (element[0].firstElementChild) && (element[0].firstElementChild.className || '');
+        customMarker.class && (classNames += " " + customMarker.class);
         customMarker.addClass('custom-marker');
-        customMarker.addClass(classNames);
+        classNames && customMarker.addClass(classNames);
         console.log('customMarker', customMarker, 'classNames', classNames);
         if (!(options.position instanceof google.maps.LatLng)) {
           NgMap.getGeoLocation(options.position).then(
-                function(latlng) {
-                  customMarker.setPosition(latlng);
-                }
+            function(latlng) {
+              customMarker.setPosition(latlng);
+            }
           );
         }
       });
-      console.log("custom-marker events", "events");
+      console.log("custom-marker events", events);
       for (var eventName in events) { /* jshint ignore:line */
         google.maps.event.addDomListener(
           customMarker.el, eventName, events[eventName]);
@@ -172,6 +197,7 @@
       restrict: 'E',
       require: ['?^map','?^ngMap'],
       compile: function(element) {
+        console.log('el', element);
         setCustomMarker();
         element[0].style.display ='none';
         var orgHtml = element.html();

build/docs/source/ngmap.custom-marker.html

@@ -29,7 +29,7 @@
  * @example
  * Usage:
  *   <map MAP_ATTRIBUTES>
- *    <shape name=SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></MARKER>
+ *    <shape name="SHAPE_NAME ANY_SHAPE_OPTIONS ANY_SHAPE_EVENTS"></shape>
  *   </map>
  *
  * Example: