Merge pull request #263 from joseeight/Components

Saving Google Components (reel components)

1 files changed, 57 insertions, 39 deletions

diff --git a/node_modules/montage-google/map.reel/map.js b/node_modules/montage-google/map.reel/map.js
index fc104df5..4e3a6d70 100644
--- a/node_modules/montage-google/map.reel/map.js
+++ b/node_modules/montage-google/map.reel/map.js
@@ -20,10 +20,11 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     didCreate: {
         value: function() {
             var self = this;
+
             window.initialize = function initialize() {
-                console.log('google maps api loaded');
                 self._mapLoaded = true;
                 self._geoCoder = new google.maps.Geocoder();
+                self.center = self._center;
                 self.needsDraw = true;
             };
         }
@@ -32,7 +33,10 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     _geoCoder: {value: null},
 
     // HTMLElement to load the Map into
-    mapEl: {value: null},
+    mapEl: {
+        serializable: true,
+        value: null
+    },
 
     _mapLoaded: {
         enumerable: false,
@@ -49,9 +53,9 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     },
 
     _latLng: {
-        value: this.defaultLatLng,
-        distinct: true
+        value: null
     },
+
     latLng: {
         get: function() {
             return this._latLng;
@@ -67,6 +71,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
 
     // {lat, lon} Or a String representing the location (eg: Paris, France)
     center: {
+        serializable: true,
         get: function() {
             return this._center;
         },
@@ -78,10 +83,12 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
 
                     if(String.isString(value)) {
                         // geocode
+                        self.LatLng = null;
                         geocoder.geocode( { 'address': value}, function(results, status) {
                             if (status == google.maps.GeocoderStatus.OK) {
                                 var loc = results[0].geometry.location;
                                 self.latLng = {lat: loc.lat(), lng: loc.lng()};
+                                self.category = self._category;
                             } else {
                                 console.log('Geocode was not successful : ' + status);
                             }
@@ -101,15 +108,17 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     },
 
     category: {
+        serializable: true,
         get: function() {
             return this._category;
         },
         set: function(value) {
-            console.log('category set: ' + value);
             if(value) {
                 this._category = value;
-                this._getPlaces(this._category);
-                this.needsDraw = true;
+                if (this._map && this.latLng) {
+                    this._getPlaces(this._category);
+                    this.needsDraw = true;
+                }
             }
         }
     },
@@ -130,7 +139,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
 
 
     zoomValue: {
-        value: 8
+        value: 13
     },
 
     __places: {value: null},
@@ -159,12 +168,12 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
             }
             var service = new google.maps.places.PlacesService(this._map);
             service.search(request, function(results, status) {
-                console.log('got places for ', self.category, status, results);
                 if (status == google.maps.places.PlacesServiceStatus.OK) {
                     self._places = results;
                 } else {
                     self._places = [];
                 }
+                self.needsDraw = true;
             });
         }
     },
@@ -240,9 +249,17 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     draw: {
         enumerable: false,
         value: function () {
-
             if(this._mapLoaded) {
-                var latLng = this.latLng || this.defaultLatLng;
+                var latLng = this.latLng;
+
+                if (!latLng) {
+                    if (this._center) {
+                        return;
+                    } else {
+                        latLng = this.defaultLatLng;
+                    }
+                }
+
                 if(!this._map) {
                     var map;
                     var myOptions = {
@@ -252,35 +269,36 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
                     };
 
                     this._map = new window.google.maps.Map(this.mapEl, myOptions);
-                 } else {
-                      var map = this._map;
-                      map.setZoom(10);
-                      var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng);
-                      map.setCenter(latLng);
-                      var marker = new google.maps.Marker({
-                          map: map,
-                          position: latLng
-                      });
-
-                      var places = this._places;
-                      if(places && places.length > 0) {
-                          map.setZoom(13);
-                          this._removeAllMarkers();
-                          for (var i = 0; i < places.length; i++) {
-                              this._createMarker(places[i]);
-                          }
-                      }
-
-                      if(this.traffic === true) {
-                          this.trafficLayer = new google.maps.TrafficLayer();
-                          this.trafficLayer.setMap(map);
-                      } else {
-                          if(this.trafficLayer) {
-                              this.trafficLayer.setMap(null);
-                          }
-                      }
+                    this.center = this._center;
+                    this.category = this._category;
                  }
 
+                 var map = this._map;
+                 //map.setZoom(10);
+                 var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng);
+                 map.setCenter(latLng);
+                 var marker = new google.maps.Marker({
+                     map: map,
+                     position: latLng
+                 });
+
+                 var places = this._places;
+                 if(places && places.length > 0) {
+                     //map.setZoom(13);
+                     this._removeAllMarkers();
+                     for (var i = 0; i < places.length; i++) {
+                         this._createMarker(places[i]);
+                     }
+                 }
+
+                 if(this.traffic === true) {
+                     this.trafficLayer = new google.maps.TrafficLayer();
+                     this.trafficLayer.setMap(map);
+                 } else {
+                     if(this.trafficLayer) {
+                         this.trafficLayer.setMap(null);
+                     }
+                 }
             }