Show listing location on a map

src/containers/ListingPage/ListingPage.css

@@ -30,8 +30,7 @@
   height: 100%;
 }
 
-.description,
-.address {
+.description {
   margin: 2rem;
 }
 

src/containers/ListingPage/ListingPage.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { intlShape, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { types } from '../../util/sdkLoader';
-import { NamedLink, PageLayout } from '../../components';
+import { NamedLink, PageLayout, Map } from '../../components';
 import { getListingsById } from '../../ducks/sdk.duck';
 import { showListing } from './ListingPage.duck';
 import css from './ListingPage.css';
@@ -56,9 +56,10 @@ export class ListingPageComponent extends Component {
 
     const title = currentListing ? currentListing.attributes.title : '';
     const description = currentListing ? currentListing.attributes.description : '';
-    const address = currentListing ? currentListing.attributes.address : '';
     const geolocation = currentListing ? currentListing.attributes.geolocation : null;
 
+    const map = geolocation ? <Map center={geolocation} /> : null;
+
     // TODO Responsive image-objects need to be thought through when final image sizes are know
     const images = currentListing && currentListing.images
       ? currentListing.images.map(i => ({ id: i.id, sizes: i.attributes.sizes }))
@@ -90,9 +91,7 @@ export class ListingPageComponent extends Component {
         {/* eslint-disable react/no-danger */}
         <div className={css.description} dangerouslySetInnerHTML={{ __html: description }} />
         {/* eslint-enable react/no-danger */}
-        <div className={css.address}>
-          {address} {geolocation ? `(${geolocation.lat}, ${geolocation.lng})` : null}
-        </div>
+        {map}
         <div className={css.filterSection}>
           <h1>Here will be filters (or dragons)</h1>
           <h2>Studio type</h2>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -7,11 +7,17 @@ exports[`ListingPage matches snapshot 1`] = `
         "__html": "listing1 description",
       }
     } />
-  <div>
-    listing1 address
-     
-    (40, 60)
-  </div>
+  <Map
+    center={
+      LatLng {
+        "lat": 40,
+        "lng": 60,
+      }
+    }
+    className=""
+    height={300}
+    width="100%"
+    zoom={11} />
   <div>
     <h1>
       Here will be filters (or dragons)