[Feature] Location Google Maps view

fields/types/location/LocationField.js

@@ -1,5 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
+import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
+import withScriptjs from 'react-google-maps/lib/async/withScriptjs';
 import Field from '../Field';
 import CollapsedFieldLabel from '../../components/CollapsedFieldLabel';
 import NestedFormField from '../../components/NestedFormField';
@@ -12,6 +14,25 @@ import {
 	LabelledControl,
 } from '../../../admin/client/App/elemental';
 
+const AsyncGoogleMap = _.flowRight(
+  withScriptjs,
+  withGoogleMap,
+)(props => (
+	<GoogleMap
+		ref={props.onMapLoad}
+		defaultZoom={16}
+		defaultCenter={props.defaultCenter}
+		onClick={props.onMapClick}
+		>
+		{props.marker && (
+			<Marker
+				{...props.marker}
+				onRightClick={() => props.onMarkerRightClick(props.marker)}
+				/>
+		)}
+	</GoogleMap>
+));
+
 /**
  * TODO:
  * - Remove dependency on underscore
@@ -34,9 +55,10 @@ module.exports = Field.create({
 	},
 
 	componentWillMount () {
-		const { value = [] } = this.props;
+		const { map, value = [] } = this.props;
+		const fields = map ? [] : ['number', 'name', 'street2', 'geo'];
 		var collapsedFields = {};
-		_.forEach(['number', 'name', 'street2', 'geo'], (i) => {
+		_.forEach(fields, (i) => {
 			if (!value[i]) {
 				collapsedFields[i] = true;
 			}
@@ -177,6 +199,77 @@ module.exports = Field.create({
 		);
 	},
 
+	handleMapLoad (map) {
+		this.map = map;
+	},
+
+	// Remove marker
+	handleMarkerRightClick () {
+		const { value = {}, path, onChange } = this.props;
+		const geo = ['', ''];
+		onChange({
+			path,
+			value: {
+				...value,
+				geo,
+			},
+		});
+	},
+
+	handleMapClick (event) {
+		const { value = {}, path, onChange } = this.props;
+		const lng = event.latLng.lng();
+		const lat = event.latLng.lat();
+		const geo = [
+			lng || (value.geo ? value.geo[0] : 0.0),
+			lat || (value.geo ? value.geo[1] : 0.0),
+		];
+		onChange({
+			path,
+			value: {
+				...value,
+				geo,
+			},
+		});
+	},
+
+	renderMap () {
+		const { value = {}, map, height, browserApiKey, defaultCenter } = this.props;
+		if (!map) return null;
+		const hasLng = value && value.geo && value.geo[0];
+		const hasLat = value && value.geo && value.geo[1];
+		const marker = hasLng && hasLat ? {
+			position: {
+				lng: value.geo[0],
+				lat: value.geo[1],
+			},
+		} : null;
+
+		const googleMapURL = `https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${browserApiKey}`;
+
+		return (
+			<FormField offsetAbsentLabel>
+				<AsyncGoogleMap
+					googleMapURL={googleMapURL}
+					defaultCenter={marker ? marker.position : defaultCenter}
+					loadingElement={
+						<div style={{ height }} />
+					}
+					containerElement={
+						<div style={{ height }} />
+					}
+					mapElement={
+						<div style={{ height }} />
+					}
+					marker={marker}
+					onMarkerRightClick={this.handleMarkerRightClick}
+					onMapLoad={this.handleMapLoad}
+					onMapClick={this.handleMapClick}
+					/>
+			</FormField>
+		);
+	},
+
 	renderGeo () {
 		if (this.state.collapsedFields.geo) {
 			return null;
@@ -282,6 +375,7 @@ module.exports = Field.create({
 				{this.renderSuburbState()}
 				{this.renderPostcodeCountry()}
 				{this.renderGeo()}
+				{this.renderMap()}
 				{this.renderGoogleOptions()}
 				{this.renderNote()}
 			</div>

fields/types/location/LocationType.js

@@ -8,6 +8,7 @@ var utils = require('keystone-utils');
 
 var RADIUS_KM = 6371;
 var RADIUS_MILES = 3959;
+var DEFAULT_CENTER = { lat: -25.363882, lng: 131.044922 };
 
 /**
  * Location FieldType Constructor
@@ -16,7 +17,7 @@ function location (list, path, options) {
 
 	this._underscoreMethods = ['format', 'googleLookup', 'kmFrom', 'milesFrom'];
 	this._fixedSize = 'full';
-	this._properties = ['enableMapsAPI'];
+	this._properties = ['enableMapsAPI', 'map', 'height', 'browserApiKey', 'defaultCenter'];
 	this.enableMapsAPI = (options.enableImprove === true || (options.enableImprove !== false && keystone.get('google server api key'))) ? true : false;
 
 	// Throw on invalid options in 4.0 (remove for 5.0)
@@ -44,6 +45,13 @@ function location (list, path, options) {
 	if (!this.requiredPaths) {
 		this.requiredPaths = ['street1', 'suburb'];
 	}
+	// Should display as a Google Map
+	this.map = options.map || false;
+	if (this.map) {
+		this.browserApiKey = keystone.get('google api key');
+		this.height = options.height || 300;
+		this.defaultCenter = options.defaultCenter || DEFAULT_CENTER;
+	}
 
 	location.super_.call(this, list, path, options);
 }

fields/types/location/Readme.md

@@ -38,6 +38,24 @@ Google Places integration requires the `google api key` option to be set for Key
 
 `geo` `Array` longitude, latitude
 
+`map` `Boolean` - Show Google Map view and select coordinates by clicking on it. Right click removes the mark. Requires the `google api key`.
+
+```js
+{ type: Types.Location, map: true }
+```
+
+`defaultCenter` `Object` - Center Google Map view at this point when `geo` value is missing.
+
+```js
+{ type: Types.Location, defaultCenter: { lat: -25.363882, lng: 131.044922 } }
+```
+
+`height` `Number` - Show Google Map view height. By default it is `300`.
+
+```js
+{ type: Types.Location, map: true, height: 400 }
+```
+
 > Important: as per the MongoDB convention, the order for the geo array must be lng, lat which is the opposite of the order used by Google's API.
 
 ## Underscore methods

package.json

@@ -76,6 +76,7 @@
     "react-dnd-html5-backend": "2.2.4",
     "react-dom": "15.4.2",
     "react-domify": "0.2.6",
+    "react-google-maps": "6.3.0",
     "react-images": "0.5.2",
     "react-markdown": "2.4.5",
     "react-redux": "5.0.3",