<!doctype html>
<html>
  <head>
    <base href="../">
    <title>JSDoc: Source:custom-control.js</title>
    <link type="text/css" rel="stylesheet" href="css/jsdoc-default.css">
    <link href="css/prettify-tomorrow.css" type="text/css" rel="stylesheet">
    <script src="js/prettify.js"></script>
  </head>
  <body>
    <nav>
      <h2><a href="index.html">Index</a></h2>
      <div>
        <h3>module: undefined</h3>
        <div>
          <h3>service</h3>
          <ul>
            <li>
              <a href="Attr2Options.html">Attr2Options</a>
            </li><li>
              <a href="GeoCoder.html">GeoCoder</a>
            </li><li>
              <a href="NavigatorGeolocation.html">NavigatorGeolocation</a>
            </li><li>
              <a href="StreetView.html">StreetView</a>
            </li>
          </ul>
        </div><div>
          <h3>directive</h3>
          <ul>
            <li>
              <a href="bicycling-layer.html">bicycling-layer</a>
            </li><li>
              <a href="cloud-layer.html">cloud-layer</a>
            </li><li>
              <a href="custom-control.html">custom-control</a>
            </li><li>
              <a href="directions.html">directions</a>
            </li><li>
              <a href="drawing-manager.html">drawing-manager</a>
            </li><li>
              <a href="dynamic-maps-engine-layer.html">dynamic-maps-engine-layer</a>
            </li><li>
              <a href="fusion-tables-layer.html">fusion-tables-layer</a>
            </li><li>
              <a href="heatmap-layer.html">heatmap-layer</a>
            </li><li>
              <a href="info-window.html">info-window</a>
            </li><li>
              <a href="kml-layer.html">kml-layer</a>
            </li><li>
              <a href="map-data.html">map-data</a>
            </li><li>
              <a href="map-lazy-load.html">map-lazy-load</a>
            </li><li>
              <a href="map-type.html">map-type</a>
            </li><li>
              <a href="maps-engine-layer.html">maps-engine-layer</a>
            </li><li>
              <a href="marker.html">marker</a>
            </li><li>
              <a href="overlay-map-type.html">overlay-map-type</a>
            </li><li>
              <a href="places-auto-complete.html">places-auto-complete</a>
            </li><li>
              <a href="shape.html">shape</a>
            </li><li>
              <a href="streetview-panorama.html">streetview-panorama</a>
            </li><li>
              <a href="traffic-layer.html">traffic-layer</a>
            </li><li>
              <a href="transit-layer.html">transit-layer</a>
            </li><li>
              <a href="weather-layer.html">weather-layer</a>
            </li>
          </ul>
        </div><div>
          <h3>controller</h3>
          <ul>
            <li>
              <a href="MapController.html">MapController</a>
            </li>
          </ul>
        </div>
      </div><div>
        <h3>module: ngmap</h3>
        <div>
          <h3>directive</h3>
          <ul>
            <li>
              <a href="ngmap.custom-marker.html">ngmap.custom-marker</a>
            </li>
          </ul>
        </div>
      </div><div>
        <h3>module: ngMap</h3>
        <div>
          <h3>directive</h3>
          <ul>
            <li>
              <a href="ngMap.map.html">ngMap.map</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <h1 class="title">
      Source:custom-control.js
    </h1>
    <div id="main">
      <article>
        <pre class="prettyprint source linenums"><code>/**
 * @ngdoc directive
 * @name custom-control
 * @param Attr2Options {service} convert html attribute to Gogole map api options
 * @param $compile {service} AngularJS $compile service
 * @description 
 *   Build custom control and set to the map with position
 *   
 *   Requires:  map directive
 *
 *   Restrict To:  Element
 *
 * @attr {String} position position of this control
 *        i.e. TOP_RIGHT
 * @attr {Number} index index of the control
 * @example
 *
 * Example: 
 *  &lt;map center="41.850033,-87.6500523" zoom="3">
 *    &lt;custom-control id="home" position="TOP_LEFT" index="1">
 *      &lt;div style="background-color: white;">
 *        &lt;b>Home&lt;/b>
 *      &lt;/div>
 *    &lt;/custom-control>
 *  &lt;/map>
 *
 */
(function() {
  'use strict';
  angular.module('ngMap').directive('customControl', ['Attr2Options', '$compile', function(Attr2Options, $compile)  {
    'use strict';
    var parser = Attr2Options;
    return {
      restrict: 'E',
      require: '^map',
      link: function(scope, element, attrs, mapController) {
        var orgAttrs = parser.orgAttributes(element);
        var filtered = parser.filter(attrs);
        var options = parser.getOptions(filtered, scope);
        var events = parser.getEvents(scope, filtered);
        console.log("custom-control options", options, "events", events);
        /**
         * build a custom control element
         */
        var customControlEl = element[0].parentElement.removeChild(element[0]);
        $compile(customControlEl.innerHTML.trim())(scope);
        /**
         * set events
         */
        for (var eventName in events) {
          google.maps.event.addDomListener(customControlEl, eventName, events[eventName]);
        }
        mapController.addObject('customControls', customControlEl);
        scope.$on('mapInitialized', function(evt, map) {
          var position = options.position;
          map.controls[google.maps.ControlPosition[position]].push(customControlEl);
        });
      } //link
    }; // return
  }]);// function
})();
</code></pre>
      </article>
    </div>
    <footer style="clear:both">
      Documentation generated by
      <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a>
      using 
      <a href="https://github.com/allenhwkim/angular-jsdoc">Angular-JSDoc template</a> 
    </footer>
    <!--%= prettyJson %-->
    <script>
      prettyPrint();
      var lineNo = window.location.hash.match(/([0-9]*)$/)[0] || 1;
      var line = document.querySelector("ol li:nth-child("+(lineNo||1)+")");
      line && line.scrollIntoView();
    </script>
  </body>
</html>