Handle marker icons

web/components/Main.js

@@ -112,6 +112,15 @@ class Main extends React.Component {
     });
   }
 
+  findMarker (id) {
+    if (!this.markers) {
+      return null;
+    }
+
+    const index = this.markers.findIndex(m => m.id === id);
+    return this.markers[index];
+  }
+
   /*
    * Refreshes search
    */
@@ -138,8 +147,9 @@ class Main extends React.Component {
       category
     });
 
+
     const markerExists = (id) => {
-      return (this.markers || []).findIndex(m => m.id === id) !== -1;
+      return this.findMarker(id) != null;
     }
 
     properties.then(p => p.text()).then(p => {
@@ -168,18 +178,42 @@ class Main extends React.Component {
       for(const [index, prop] of data.entries()) {
         const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};
 
-        if (!markerExists(p._id)) {
+        if (!markerExists(prop._id)) {
+
           const marker = new google.maps.Marker({
-            position: myLatLng,
-            map: map,
-            title: prop.title
+            position : myLatLng,
+            map      : map,
+            title    : prop.title,
+            icon     : this.defaultMarkerIcon(),
+            id       : prop._id
+          });
+
+          marker.addListener('mouseover', () => {
+            if (marker.id !== this.state.listingId) {
+              marker.setIcon(this.hoveredMarkerIcon());
+            }
+          });
+
+          marker.addListener('mouseout', () => {
+            if (marker.id !== this.state.listingId) {
+              marker.setIcon(this.defaultMarkerIcon());
+            }
           });
 
           marker.addListener('click', () => {
-            console.log('clicking...')
+            console.log('clicking...', prop._id);
+            if (this.state.listingId) {
+              const prevSelected = this.findMarker(this.state.listingId);
+              if (prevSelected) {
+                console.log('prevselected', prevSelected);
+                prevSelected.marker.setIcon(this.defaultMarkerIcon());
+              }
+            }
+
+            marker.setIcon(this.selectedMarkerIcon());
             this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
-              id: prop.url
-            }})
+              id: prop._id
+            }});
           });
 
           newMarkers.push({
@@ -211,6 +245,57 @@ class Main extends React.Component {
     })
   }
 
+  /*
+   * Get default marker icon
+   */
+  defaultMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 48;
+    const height = 64;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(0, 36 * sf)
+    }
+
+    return icon;
+  }
+
+  /*
+   * Hovered marker icon
+   */
+  hoveredMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 61;
+    const height = 82;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(303 * sf, 18 * sf)
+    }
+
+    return icon;
+  }
+
+  /*
+   * Selected marker icon
+   */
+  selectedMarkerIcon () {
+    const sf     = 0.5;
+    const width  = 73;
+    const height = 100;
+    const icon   = {
+      url        : "static/images/pins_sprite.png",
+      size       : new google.maps.Size(width * sf, height * sf),
+      scaledSize : new google.maps.Size(730 * sf, 102 * sf),
+      origin     : new google.maps.Point(655 * sf, 1 * sf)
+    }
+
+    return icon;
+  }
+
   renderRightContent() {
 
     const children = [];