Add complete info for merchant pin at "show on map"

src/components/pages/MerchantsPage.js

@@ -348,12 +348,7 @@ class MerchantsPage extends Component {
             color: 'white',
             whiteSpace: 'nowrap'
         }}
-        onClick={() => this.openMaps(
+        onClick={() => this.openMaps(merchant.name, app.getMerchantMarker(merchant))}
-          merchant.name,
-          infoDescription,
-          merchant.lat,
-          merchant.lon
-        )}
       >Show on Map
       </Button>;
       return merchant;
@@ -378,25 +373,17 @@ class MerchantsPage extends Component {
      });
   }
 
-  openMaps(name, address, lat, lon){
+  openMaps(name, marker){
     this.setState({
       mapsTitle: name,
-      mapsDescription: address,
+      mapsDescription: marker.infoDescription,
-      mapsLat: lat,
+      mapsLat: marker.lat,
-      mapsLon: lon,
+      mapsLon: marker.lng,
       mapsModalIsOpen: true
     });
   }
 
-  handleSearchChange(data){
+  getMerchantMarker = (merchant) => {
-    this.setState({ merchantsSearch: data });
-  }
-
-  render() {
-    let { data: merchantsData } = this.state.merchants;
-    const { ambassadorsMarkers, merchantsSearch } = this.state;
-
-    const merchantMarkers = merchantsSearch.map(merchant => {
     const infoDescription = <div>
       <div><b>Address</b>: {merchant.address}</div>
       {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
@@ -418,6 +405,18 @@ class MerchantsPage extends Component {
       infoDescription: infoDescription,
     };
     return marker;
+  };
+
+  handleSearchChange(data){
+    this.setState({ merchantsSearch: data });
+  }
+
+  render() {
+    let { data: merchantsData } = this.state.merchants;
+    const { ambassadorsMarkers, merchantsSearch } = this.state;
+
+    const merchantMarkers = merchantsSearch.map(merchant => {
+      return this.getMerchantMarker(merchant);
     });
 
     merchantsData = merchantsData.sort(sortBy('location.searchText'));