added map-type documentation

Author: Paul Bulai

app/scripts/controllers/api.js

@@ -8,6 +8,7 @@ angular.module('angularGoogleMapsApp')
     'circle',
     'layer',
     'map-control',
+    'map-type',
     'marker',
     'marker-label',
     'markers',

app/views/directive/map-type.html

@@ -0,0 +1,62 @@
+<new-scope>
+  <p>The <code>map-type</code> directive is used to add custom map types, as overlays or single layers.</p>
+
+  <h4>Usage</h4>
+
+  <div hljs language="html" include="'map-type-template'"></div>
+  <h4>Parameters</h4>
+
+  <p>Required properties are in red.</p>
+  <table class="table table-bordered table-striped">
+      <thead>
+      <tr>
+          <th>Param</th>
+          <th>Type</th>
+          <th>Details</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+          <td>options</td>
+          <td><span class="label label-danger">expression</span></td>
+          <td>Map type options, including in particular <code>getTile</code> or <code>getTileUrl</code> methods.
+              For complete list of options see <a
+                      href="https://developers.google.com/maps/documentation/javascript/maptypes#MapTypeInterface"
+                      target="_blank">Google Maps API documentation</a>.
+          </td>
+      </tr>
+      <tr>
+          <td>id</td>
+          <td><span class="label label-info">string</span></td>
+          <td>Map type id, to be used in the controler to display the maptype as a single layer.</td>
+      </tr>
+      <tr>
+          <td>show</td>
+          <td><span class="label label-info">expression</span></td>
+          <td>Scope variable used to show the maptype as an overlay. Defaults to <code>true</code>, unless <code>id</code>
+              has been defined
+          </td>
+      </tr>
+      <tr>
+          <td>refresh</td>
+          <td><span class="label label-info">expression</span></td>
+          <td>Variable or expression to watch, which will trigger a maptype refresh when changing.<br>
+              Useful in the case where the <code>getTileUrl</code> is dynamically defined (for example using
+              filters, options&hellip;), and you want to apply changes immediately.
+          </td>
+      </tr>
+      </tbody>
+  </table>
+
+  <h4>Examples</h4>
+  <runnable-example example="'map-type'"></runnable-example>
+
+  <script type="text/ng-template" id="map-type-template">
+    <ui-gmap-map-type
+        options='{expression}'
+        id="'{string}'"
+        show='{expression}'
+        refresh='{expression}'>
+    </ui-gmap-map-type>
+  </script>
+</new-scope>

app/views/examples/map-type/index.html

@@ -0,0 +1,7 @@
+<div id="map_canvas" ng-controller="mainCtrl">
+    <ui-gmap-google-map center="map.center" zoom="map.zoom">
+        <ui-gmap-map-type options="squaresMapType" show="map.showOverlay"></ui-gmap-map-type>
+    </ui-gmap-google-map>
+
+    <a class="btn btn-primary" ng-click="map.showOverlay = !map.showOverlay">Toggle overlay</a>
+</div>

app/views/examples/map-type/manifest.json

@@ -0,0 +1,4 @@
+{
+  "name": "map-type",
+  "files": ["index.html", "script.js", "../base/plnkr.html"]
+}

app/views/examples/map-type/script.js

@@ -0,0 +1,32 @@
+angular
+  .module('appMaps', ['uiGmapgoogle-maps'])
+  .controller('mainCtrl', function($scope, $log) {
+    // Define map type options
+    $scope.squaresMapType = {
+      getTile: function(coord, zoom, ownerDocument) {
+        var div = ownerDocument.createElement('div');
+        div.innerHTML = coord;
+        div.style.width = this.tileSize.width + 'px';
+        div.style.height = this.tileSize.height + 'px';
+        div.style.fontSize = '10';
+        div.style.borderStyle = 'solid';
+        div.style.borderWidth = '1px';
+        div.style.borderColor = '#AAAAAA';
+        return div;
+      },
+      tileSize: new google.maps.Size(256, 256),
+      name: 'Black Squares',
+      maxZoom: 19,
+    };
+
+    // Define map options
+    $scope.map = {
+      center: {
+        latitude: 41.850033,
+        longitude: -87.6500523
+      },
+      showOverlay: true,
+      zoom: 10,
+    };
+
+  });