Show address marker on map

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,
   },
 };

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,
 };
 

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

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,