From 178ffed31342f7f185dd51f15875b7e878ecfdaf Mon Sep 17 00:00:00 2001 From: Dan Head Date: Sat, 4 Mar 2017 00:21:13 +0000 Subject: [PATCH] Spice up the maps with some InfoWindows --- src/components/Map/Map.css | 21 ++++++ src/components/Map/Map.js | 98 ++++++++++++++++++------- src/routes/accomodation/Accomodation.js | 45 ++++++++---- src/routes/ceremony/Ceremony.js | 14 ++-- src/routes/reception/Reception.js | 16 ++-- src/routes/transport/Transport.js | 38 ++++++---- 6 files changed, 161 insertions(+), 71 deletions(-) create mode 100644 src/components/Map/Map.css diff --git a/src/components/Map/Map.css b/src/components/Map/Map.css new file mode 100644 index 0000000..d9c811c --- /dev/null +++ b/src/components/Map/Map.css @@ -0,0 +1,21 @@ +.root { + height: 360px; + width: 100%; + max-width: 480px; + overflow: hidden; + text-shadow: none; +} + +.map { + height: 360px; + width: 100%; + max-width: 480px; +} + +.info { + color: #000; +} + +.infoTitle { + margin: 2px 0 10px; +} diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js index a3fc26c..a843200 100644 --- a/src/components/Map/Map.js +++ b/src/components/Map/Map.js @@ -1,57 +1,103 @@ import React, { PropTypes } from 'react'; -import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; +import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import { withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps'; +import s from './Map.css'; class Map extends React.Component { static propTypes = { defaultZoom: PropTypes.number.isRequired, - lat: PropTypes.number.isRequired, - lng: PropTypes.number.isRequired, - markers: PropTypes.arrayOf(PropTypes.shape({ - title: PropTypes.string.isRequired, + defaultCenter: PropTypes.shape({ lat: PropTypes.number.isRequired, lng: PropTypes.number.isRequired, + }).isRequired, + markers: PropTypes.arrayOf(PropTypes.shape({ + title: PropTypes.string.isRequired, + position: PropTypes.shape({ + lat: PropTypes.number.isRequired, + lng: PropTypes.number.isRequired, + }).isRequired, + showInfo: PropTypes.boolean, + infoContent: PropTypes.string, })).isRequired, }; + constructor(props) { + super(props); + this.state = { + markers: this.props.markers, + }; + } + + handleMarkerClick = (targetMarker) => { + this.setState({ + markers: this.state.markers.map(marker => { + if (marker === targetMarker) { + return { + ...marker, + showInfo: true, + }; + } + return marker; + }), + }); + }; + + handleMarkerClose = (targetMarker) => { + this.setState({ + markers: this.state.markers.map(marker => { + if (marker === targetMarker) { + return { + ...marker, + showInfo: false, + }; + } + return marker; + }), + }); + } + render() { const GMap = withGoogleMap(() => ( - {this.props.markers.map((props, index) => ( + {this.state.markers.map((marker, index) => ( + defaultAnimation="2" + {...marker} + onClick={() => this.handleMarkerClick(marker)} + > + {marker.showInfo && ( + this.handleMarkerClose(marker)} + > +
+
+ {marker.url ? ( + {marker.title} + ) : marker.title } +
+ {marker.infoContent} +
+ + )} + ))} )); return ( +
} mapElement={ -
+
} /> ); } } -export default Map; +export default withStyles(s)(Map); diff --git a/src/routes/accomodation/Accomodation.js b/src/routes/accomodation/Accomodation.js index c7f1a82..3dcc59a 100644 --- a/src/routes/accomodation/Accomodation.js +++ b/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 (
@@ -57,9 +71,8 @@ class Accomodation extends React.Component {
diff --git a/src/routes/ceremony/Ceremony.js b/src/routes/ceremony/Ceremony.js index 75ed01c..8649eed 100644 --- a/src/routes/ceremony/Ceremony.js +++ b/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.

About the church

All Saints Church is a medieval church with parts dating from the 13th century. diff --git a/src/routes/reception/Reception.js b/src/routes/reception/Reception.js index 48631fe..5fc90d5 100644 --- a/src/routes/reception/Reception.js +++ b/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 {

The venue is approximately a 30 minute drive from the Church.

diff --git a/src/routes/transport/Transport.js b/src/routes/transport/Transport.js index a8f838d..d6fc752 100644 --- a/src/routes/transport/Transport.js +++ b/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 (
@@ -45,9 +56,8 @@ class Transport extends React.Component { All trains terminate at London St Pancras or London Kings Cross

Car

Offley Place has secure parking facilities.