[docs] Add map example to old docs page to aid development.

index.html

@@ -41,6 +41,7 @@
                         <li><a href="#/generic/LineChart">Line chart</a></li>
                         <li><a href="#/annotation">Annotation chart</a></li>
                         <li><a href="#/gauge">Gauge chart</a></li>
+                        <li><a href="#/map">Map Chart</a></li>
                         <li class="divider"></li>
                         <li class="dropdown-header">All together</li>
                         <li><a href="#/fat">Mutli charts sample</a></li>
@@ -68,13 +69,14 @@ <h1>AngularJs Google Chart Tools directive</h1>
 <!-- jQuery imported here only for Bootstrap.js and for this sample functions. It's not needed for the directive itself. -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
-<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular-route.min.js"></script>
 <script src="ng-google-chart.js"></script>
 <script src="sample.js"></script>
 <script src="partials/annotation.js"></script>
 <script src="partials/generic.js"></script>
 <script src="partials/gauge.js"></script>
 <script src="partials/fat.js"></script>
+<script src="partials/map.js"></script>
 </body>
 </html>

partials/map.html

@@ -0,0 +1,5 @@
+<h1>Map</h1>
+
+<div google-chart chart="myMapChart" style="height:130px; width:100%;"></div>
+
+<iframe src="partials/map.js" style="width:90%; height: 350px; margin: 1%; border: 1px solid black;" frameborder="0"></iframe>

partials/map.js

@@ -0,0 +1,22 @@
+(function(){
+    angular.module('google-chart-sample')
+        .controller("MapChartCtrl", MapChartCtrl);
+
+    MapChartCtrl.$inject = ["$scope"];
+    function MapChartCtrl($scope){
+        $scope.myMapChart = {
+            type: "Map",
+            data: [
+                ["Lat", "Long", "Name"],
+                [37.4232, -122.0853, 'Work'],
+                [37.4289, -122.1697, 'University'],
+                [37.6153, -122.3900, 'Airport'],
+                [37.4422, -122.1731, 'Shopping']
+            ],
+            options: {
+                showTooltop: true,
+                showInfoWindow: true
+            }
+        }
+    }
+})();

sample.js

@@ -15,13 +15,24 @@ angular.module("google-chart-sample", ["ngRoute", "googlechart"]).config(['$rout
                 templateUrl: 'partials/gauge.html',
                 controller: 'GaugeChartCtrl'
             }).
+            when('/map', {
+                templateUrl: 'partials/map.html',
+                controller: 'MapChartCtrl'
+            }).
             when('/generic/:chartType', {
                 templateUrl: 'partials/generic.html',
                 controller: 'GenericChartCtrl'
             }).
             otherwise({
                 redirectTo: '/fat'
             });
+    }])
+    .config(["agcLibraryLoaderProvider", function(agcLibraryLoaderProvider){
+        agcLibraryLoaderProvider.setLoader("gstatic");
+    }])
+    .config(["agcGstaticLoaderProvider", function(gstaticProvider){
+        gstaticProvider.addPackage("map");
+        //gstaticProvider.setOption("mapsApiKey", "INSERT YOUR KEY HERE");
     }]);/*.value('googleChartApiConfig', {
             version: '1',
             optionalSettings: {