Handle marker icons

web/lib/handlers.js

@@ -55,7 +55,7 @@ const listingsLoaded = ({ type, action }, component) => {
   const currentListings = new Map();
 
   for (const listing of action.listings) {
-    currentListings.set(listing.url, listing);
+    currentListings.set(listing._id, listing);
   }
 
   component.setState({
@@ -151,7 +151,20 @@ const setCategory = ({type, action}, component) => {
       component.refreshListings();
     }
   );
-}
+};
+
+const onListingMouseOver = ({type, action}, component) => {
+  const marker = component.findMarker(action.id);
+  if (marker) {
+    marker.marker.setIcon(component.hoveredMarkerIcon());
+    marker.marker.setAnimation(google.maps.Animation.BOUNCE);
+    setTimeout(() => {
+      marker.marker.setAnimation(null);
+      marker.marker.setIcon(component.defaultMarkerIcon());
+    } , 710);
+  }
+
+};
 
 const handlers = {
   SET_MIN_PRICE: setMinPrice,
@@ -167,7 +180,8 @@ const handlers = {
   SET_ROOMS: setRooms,
   VIEW_LISTING_DETAILS: viewListingDetails,
   UPDATE_SEARCH: updateSearch,
-  SET_CATEGORY: setCategory
+  SET_CATEGORY: setCategory,
+  ON_LISTING_MOUSE_OVER: onListingMouseOver
 };
 
 export const handleMessage = ({ type, action }, component) => {