changed map pool to find by id. if id not given find ununsed one. Also changed getMap parameter to be string

allenhwkim · allenhwkim · commit eebb6acf4249 · 2016-04-04T00:14:49.000-04:00
diff --git a/services/ng-map-pool.js b/services/ng-map-pool.js
@@ -23,10 +23,27 @@
     return map;
   };
 
-  var find = function(el) { //jshint ignore:line
+  var findById = function(el, id) {
     var notInUseMap;
     for (var i=0; i<mapInstances.length; i++) {
       var map = mapInstances[i];
+      if (map.id == id && !map.inUse) {
+        var mapDiv = map.getDiv();
+        el.appendChild(mapDiv);
+        notInUseMap = map;
+        break;
+      }
+    }
+    return notInUseMap;
+  };
+
+  var findUnused = function(el) { //jshint ignore:line
+    var notInUseMap;
+    for (var i=0; i<mapInstances.length; i++) {
+      var map = mapInstances[i];
+      if (map.id) {
+        continue;
+      }
       if (!map.inUse) {
         var mapDiv = map.getDiv();
         el.appendChild(mapDiv);
@@ -44,7 +61,7 @@
    * @return map instance for the given element
    */
   var getMapInstance = function(el) {
-    var map = find(el);
+    var map = findById(el, el.id) || findUnused(el);
     if (!map) {
       map = add(el);
     } else {
diff --git a/services/ng-map.js b/services/ng-map.js
@@ -41,15 +41,14 @@
   /**
    * @memberof NgMap
    * @function getMap
-   * @param {Hash} options optional, e.g., {id: 'foo, timeout: 5000}
+   * @param {String} optional, id e.g., 'foo'
    * @returns promise
    */
-  var getMap = function(options) {
-    options = options || {};
-    var deferred = $q.defer();
+  var getMap = function(id) {
+    id = typeof id === 'object' ? id.id : id;
 
-    var id = options.id || 0;
-    var timeout = options.timeout || 2000;
+    var deferred = $q.defer();
+    var timeout = 2000;
 
     function waitForMap(timeElapsed){
       if(mapControllers[id]){
diff --git a/testapp/ui-router.html b/testapp/ui-router.html
@@ -17,15 +17,15 @@
       .state('baz', { url: "/baz", templateUrl: "baz.html" })
   });
   myapp.controller('fooCtrl', function($scope, NgMap){
-    NgMap.getMap({id:'foomap'}).then(function(map) {
+    NgMap.getMap('foomap').then(function(map) {
       console.log('NgMap.getMap in fooCtrl', map);
     });
     $scope.onClick = function() {
       alert('map clicked');
     }
   });
   myapp.controller('barCtrl', function(NgMap){
-    NgMap.getMap({id:'barmap'}).then(function(map) {
+    NgMap.getMap('barmap').then(function(map) {
       console.log('NgMap.getMap in barCtrl', map);
     });
   });
diff --git a/testapp/ui-router2.html b/testapp/ui-router2.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>AngularJS: UI-Router Quick Start</title>
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+<script src="script-tags-for-development.js"></script>
+<link href="lib/bootstrap.min.css" rel="stylesheet">
+<script src="lib/angular-ui-router.js"></script>
+<link href="custom-marker.css"  rel="stylesheet" />
+<script>
+  var myapp = angular.module('myapp', ['ngMap',"ui.router"])
+  myapp.controller('fooCtrl', function(NgMap) {
+    NgMap.getMap('map1').then(function(map) {
+      var latLng = new google.maps.LatLng(40.74, -74.18);
+      var marker = new google.maps.Marker({
+        position:latLng, draggable: true
+      });
+      marker.setMap(map);
+    })
+  });
+  myapp.config(function($stateProvider, $urlRouterProvider){
+    $urlRouterProvider.otherwise("/foo")
+    $stateProvider
+      .state('foo', { url: "/foo", templateUrl: "foo.html", controller: 'fooCtrl', controllerAs: 'vm'  })
+      .state('bar', { url: "/bar", templateUrl: "bar.html"})
+  })
+</script>
+</head>
+
+<body ng-app="myapp">
+  This is to test not to share map instance if `id` is given
+  <script type="text/ng-template" id="foo.html">
+    <h1>Map 1</h1>
+    <ng-map id="map1" center="[40.74, -74.18]"></ng-map>
+  </script>
+  
+  <script type="text/ng-template" id="bar.html">
+    <h1>Map 2 - Should not have any markers </h1>
+    <ng-map center="[40.74, -74.18]"></ng-map>
+  </script>
+  
+  <div class="navbar">
+    <div class="navbar-inner">
+      <ul class="nav">
+        <li><a ui-sref="foo">Route 1</a></li>
+        <li><a ui-sref="bar">Route 2</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="well" ui-view></div>
+</body>
+
+</html>
