From 295420868f4f49f942f66e5b0df69a7abf2cf169 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Fri, 17 Mar 2017 13:02:19 +0200
Subject: [PATCH] Show address marker on map

---
 src/components/Map/Map.example.js                     |  1 +
 src/components/Map/Map.js                             | 11 +++++++++--
 src/containers/ListingPage/ListingPage.js             |  4 ++--
 .../__snapshots__/ListingPage.test.js.snap            |  1 +
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/Map.example.js b/src/components/Map/Map.example.js
index 2fb0e50b..12fa4a07 100644
--- a/src/components/Map/Map.example.js
+++ b/src/components/Map/Map.example.js
@@ -7,6 +7,7 @@ export const Empty = {
   component: Map,
   props: {
     center: new LatLng(60.16502999999999, 24.940064399999983),
+    address: 'Sharetribe',
     zoom: 22,
   },
 };
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index fc2b66d0..f09ccce0 100644
--- a/src/components/Map/Map.js
+++ b/src/components/Map/Map.js
@@ -7,7 +7,7 @@ class Map extends Component {
     if (!mapsLibLoaded) {
       throw new Error('Google Maps API must be loaded for the Map component');
     }
-    const { center, zoom } = this.props;
+    const { center, zoom, address } = this.props;
     const centerLocation = { lat: center.lat, lng: center.lng };
     const mapOptions = {
       center: centerLocation,
@@ -16,7 +16,13 @@ class Map extends Component {
       // Disable zooming by scrolling
       scrollwheel: false,
     };
-    this.map = new window.google.maps.Map(this.el, mapOptions);
+    const map = new window.google.maps.Map(this.el, mapOptions);
+    // eslint-disable-next-line no-new
+    new window.google.maps.Marker({
+      position: centerLocation,
+      map,
+      title: address,
+    });
   }
   render() {
     const { className, width, height } = this.props;
@@ -42,6 +48,7 @@ Map.propTypes = {
   width: oneOfType([number, string]),
   height: oneOfType([number, string]),
   center: propTypes.latlng.isRequired,
+  address: string.isRequired,
   zoom: number,
 };
 
diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
index 439e8d10..933242ea 100644
--- a/src/containers/ListingPage/ListingPage.js
+++ b/src/containers/ListingPage/ListingPage.js
@@ -56,9 +56,9 @@ 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;
+    const map = geolocation ? <Map center={geolocation} address={address} /> : null;
 
     // TODO Responsive image-objects need to be thought through when final image sizes are know
     const images = currentListing && currentListing.images
diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
index d5a9d6e6..2872a1b3 100644
--- a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
+++ b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -8,6 +8,7 @@ exports[`ListingPage matches snapshot 1`] = `
       }
     } />
   <Map
+    address="listing1 address"
     center={
       LatLng {
         "lat": 40,