Spice up the maps with some InfoWindows

src/routes/accomodation/Accomodation.js

@@ -3,43 +3,57 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Accomodation.css';
 import Map from '../../components/Map';
 
-const offley = [
-  {
-    title: 'Offley Place',
-    url: 'http://www.offleyplace.com/',
+const offley = {
+  title: 'Offley Place',
+  url: 'http://www.offleyplace.com/',
+  position: {
     lat: 51.9282,
     lng: -0.3332,
   },
-];
+  showInfo: true,
+};
 
 const hotels = [
   {
     title: 'Hilton Garden Inn',
     url: 'http://hiltongardeninn3.hilton.com/en/hotels/united-kingdom/hilton-garden-inn-luton-north-LTNNOGI/index.html',
-    lat: 51.9116,
-    lng: -0.3883,
+    position: {
+      lat: 51.9116,
+      lng: -0.3883,
+    },
   },
   {
     title: 'Premier Inn',
     url: 'http://www.premierinn.com/gb/en/hotels/england/hertfordshire/hitchin/hitchin-town-centre.html',
-    lat: 51.9493,
-    lng: -0.2762,
+    position: {
+      lat: 51.9493,
+      lng: -0.2762,
+    },
   },
   {
     title: 'Lodge Farm House',
     url: 'http://lodgefarmbandb.co.uk',
-    lat: 51.9054,
-    lng: -0.3354,
+    position: {
+      lat: 51.9054,
+      lng: -0.3354,
+    },
   },
   {
     title: 'Red Lion Inn',
     url: 'http://www.theredliongreatoffley.co.uk',
-    lat: 51.9266,
-    lng: -0.3348,
+    position: {
+      lat: 51.9266,
+      lng: -0.3348,
+    },
   },
 ];
 
 class Accomodation extends React.Component {
+  constructor(props) {
+    super(props);
+    this.markers = [offley].concat(hotels);
+  }
+
   render() {
     return (
       <div className={s.root}>
@@ -57,9 +71,8 @@ class Accomodation extends React.Component {
             </ul>
             <Map
               defaultZoom={12}
-              lat={offley[0].lat}
-              lng={offley[0].lng}
-              markers={hotels}
+              defaultCenter={offley.position}
+              markers={this.markers}
             />
           </div>
         </div>

src/routes/ceremony/Ceremony.js

@@ -3,13 +3,14 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Ceremony.css';
 import Map from '../../components/Map';
 
-const markers = [
-  {
-    title: 'All Saints\' Church',
+const church = {
+  title: 'All Saints\' Church',
+  position: {
     lat: 51.7109,
     lng: -0.4479,
   },
-];
+  showInfo: true,
+};
 
 class Ceremony extends React.Component {
   render() {
@@ -31,9 +32,8 @@ class Ceremony extends React.Component {
               Parking is available across the road at the Rose and Crown pub.</p>
             <Map
               defaultZoom={14}
-              lat={markers[0].lat}
-              lng={markers[0].lng}
-              markers={markers}
+              defaultCenter={church.position}
+              markers={[church]}
             />
             <h3>About the church</h3>
             <p>All Saints Church is a medieval church with parts dating from the 13th century.

src/routes/reception/Reception.js

@@ -3,14 +3,15 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Reception.css';
 import Map from '../../components/Map';
 
-const offley = [
-  {
-    title: 'Offley Place',
-    url: 'http://www.offleyplace.com/',
+const offley = {
+  title: 'Offley Place',
+  url: 'http://www.offleyplace.com/',
+  position: {
     lat: 51.9282,
     lng: -0.3332,
   },
-];
+  showInfo: true,
+};
 
 class Reception extends React.Component {
   render() {
@@ -35,9 +36,8 @@ class Reception extends React.Component {
             <p>The venue is approximately a 30 minute drive from the Church.</p>
             <Map
               defaultZoom={12}
-              lat={offley[0].lat}
-              lng={offley[0].lng}
-              markers={offley}
+              defaultCenter={offley.position}
+              markers={[offley]}
             />
           </div>
         </div>

src/routes/transport/Transport.js

@@ -3,34 +3,45 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './Transport.css';
 import Map from '../../components/Map';
 
-const offley = [
-  {
-    title: 'Offley Place',
-    url: 'http://www.offleyplace.com/',
+const offley = {
+  title: 'Offley Place',
+  url: 'http://www.offleyplace.com/',
+  position: {
     lat: 51.9282,
     lng: -0.3332,
   },
-];
+  showInfo: true,
+};
 
 const stations = [
   {
     title: 'Hitchin',
-    lat: 51.9532,
-    lng: -0.2655,
+    position: {
+      lat: 51.9532,
+      lng: -0.2655,
+    },
   },
   {
     title: 'Luton',
-    lat: 51.8820,
-    lng: -0.4171,
+    position: {
+      lat: 51.8820,
+      lng: -0.4171,
+    },
   },
   {
     title: 'Luton Airport Parkway',
-    lat: 51.8724,
-    lng: -0.3984,
+    position: {
+      lat: 51.8724,
+      lng: -0.3984,
+    },
   },
 ];
 
 class Transport extends React.Component {
+  constructor(props) {
+    super(props);
+    this.markers = [offley].concat(stations);
+  }
   render() {
     return (
       <div className={s.root}>
@@ -45,9 +56,8 @@ class Transport extends React.Component {
               All trains terminate at London St Pancras or London Kings Cross</p>
             <Map
               defaultZoom={11}
-              lat={offley[0].lat}
-              lng={offley[0].lng}
-              markers={stations}
+              defaultCenter={offley.position}
+              markers={this.markers}
             />
             <h3>Car</h3>
             <p>Offley Place has secure parking facilities.</p>