Router done

web/components/Main.js

@@ -29,6 +29,8 @@ class Main extends React.Component {
       state.filters.category = props.initialState.category;
       state.sort = props.initialState.sort || state.sort;
       state.listingId = props.initialState.listingId;
+      state.bounds = props.initialState.bounds;
+      state.zoom = props.initialState.zoom;
       if (state.listingId) {
         state.listingDetails = true;
       }
@@ -44,12 +46,20 @@ class Main extends React.Component {
 
   componentDidMount() {
     const uluru = {lat: 43.845031, lng: 18.4019262};
-    const map = new google.maps.Map(this.refs.map, {
-      zoom: 13,
-      center: uluru,
+    const opts = {
+      //zoom: 13,
+      //center: uluru,
       streetViewControl: false,
       mapTypeControl: false
-    });
+    };
+
+    if (!this.state.bounds) {
+      opts.zoom = 13;
+      opts.center= uluru;
+    };
+
+    const map = new google.maps.Map(this.refs.map, opts);
+    window.gmap = map;
 
     //const marker = new google.maps.Marker({
       //position: uluru,
@@ -68,6 +78,37 @@ class Main extends React.Component {
     var options = {
       componentRestrictions: {country: "BA"}
     };
+
+    const regularIdle = () => {
+      this.dispatch({type: 'UPDATE_ROUTE', action: {params: {
+        bounds: map.getBounds().toUrlValue(),
+        zoom: map.getZoom()
+      }}});
+
+      this.dispatch({type: 'MAP_IDLE'});
+    };
+
+    // Check if initial bounds are passed-in
+
+    google.maps.event.addListenerOnce(map, 'idle', () => {
+
+      if (this.state.bounds) {
+        const [ lat1, lng1, lat2, lng2 ] = this.state.bounds.split(",");
+        const sw = new google.maps.LatLng({lat: parseFloat(lat1), lng: parseFloat(lng1)});
+        const ne = new google.maps.LatLng({lat: parseFloat(lat2), lng: parseFloat(lng2)});
+
+        const initialBounds = new google.maps.LatLngBounds(sw, ne);
+        //map.fitBounds(initialBounds);
+
+           const originalMaxZoom = map.maxZoom;
+           const originalMinZoom = map.minZoom;
+           map.setOptions({maxZoom: parseInt(this.state.zoom), minZoom: parseInt(this.state.zoom)});
+           map.fitBounds(initialBounds);
+           map.setOptions({maxZoom: originalMaxZoom, minZoom: originalMinZoom});
+      }
+
+    });
+    map.addListener('idle', regularIdle);
     var searchBox = new google.maps.places.Autocomplete(input, options);
 
     searchBox.addListener('place_changed', () => {
@@ -98,25 +139,8 @@ class Main extends React.Component {
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
     this.map = map;
 
-    map.addListener('zoom_changed', () => {
-      this.removeAllMarkers();
-      this.markers = [];
-    });
-
-    map.addListener('idle', () => {
-      this.dispatch({type: 'UPDATE_ROUTE', action: {params: {
-        bounds: map.getBounds().toUrlValue()
-      }}});
-
-      this.dispatch({type: 'MAP_IDLE'});
-    });
-
-
     // TODO: if state contains listingId reload
-    //
-
     if (this.state.listingId) {
-
       loadListing(this.state.listingId).then(l => l.text()).then(l => {
         this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
           id: this.state.listingId,