WIP

assets/js/geo-location/index.js

@@ -6,7 +6,7 @@ import { registerPlugin } from '@wordpress/plugins';
 /**
  * Internal dependencies.
  */
-import LatLongPanel from './plugins/meta-fields';
+import LatLongPanel from './panel';
 
 registerPlugin('ep-lat-long', {
 	render: LatLongPanel,

assets/js/geo-location/panel/AutoCompleteField.js

@@ -0,0 +1,41 @@
+import { useState, useEffect, useRef } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { TextControl } from "@wordpress/components";
+
+export default ({ onPlaceSelected, value }) => {
+	const inputRef = useRef(null);
+
+	const [location, setLocation] = useState(value);
+
+
+	console.log( location );
+	useEffect(() => {
+		if (inputRef.current && window.google) {
+			const autocomplete = new window.google.maps.places.Autocomplete(
+				inputRef.current,
+				{
+					types: ["geocode"], // You can restrict the types of predictions
+				},
+			);
+
+			autocomplete.addListener("place_changed", () => {
+				const place = autocomplete.getPlace();
+				setLocation(place.formatted_address);
+				onPlaceSelected(place);
+			});
+		}
+	}, []);
+
+	return (
+		<>
+			<TextControl
+				ref={inputRef}
+				type="text"
+				label={__("Address", "elasticpress-labs")}
+				placeholder={__("Enter an address", "elasticpress-labs")}
+				value={location}
+				onChange={(value) => setLocation(value)}
+			/>
+		</>
+	);
+};

assets/js/geo-location/plugins/meta-fields.js → assets/js/geo-location/panel/index.js

@@ -2,13 +2,17 @@ import { PluginDocumentSettingPanel } from '@wordpress/editor';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useState, useEffect, useRef } from '@wordpress/element';
+
+import AutoCompleteField from './AutoCompleteField';
 
 export default () => {
 	const { editPost } = useDispatch('core/editor');
 
 	const {
 		ep_latitude = false,
 		ep_longitude = false,
+		ep_location = false,
 		...meta
 	} = useSelect((select) => select('core/editor').getEditedPostAttribute('meta') || {});
 
@@ -20,20 +24,34 @@ export default () => {
 		editPost({ meta: { ...meta, ep_longitude: longitude } });
 	};
 
+	const onPlaceSelected = (place) => {
+		editPost({ meta: { ...meta, ep_location: place.formatted_address } });
+
+		if (place.geometry && place.geometry.location) {
+			const latitude = place.geometry.location.lat();
+			const longitude = place.geometry.location.lng();
+
+			onUpdateLatitude(latitude);
+			onUpdateLongitude(longitude);
+		}
+	};
+
 	return (
 		<PluginDocumentSettingPanel
 			name="ep-lat-long-panel"
-			title={__('ElasticPress Geo Location', 'elasticpress')}
+			title={__("ElasticPress Geo Location", "elasticpress-labs")}
 			className="ep-lat-long-panel"
 		>
+			<AutoCompleteField value={ep_location} onPlaceSelected={onPlaceSelected} />
+
 			<TextControl
-				label={__('Latitude', 'elasticpress')}
+				label={__("Latitude", "elasticpress-labs")}
 				value={ep_latitude}
 				onChange={onUpdateLatitude}
 				type="number"
 			/>
 			<TextControl
-				label={__('Longitude', 'elasticpress')}
+				label={__("Longitude", "elasticpress-labs")}
 				value={ep_longitude}
 				onChange={onUpdateLongitude}
 				type="number"

includes/classes/Feature/GeoLocation.php

@@ -38,6 +38,12 @@ public function __construct() {
 	 * Setup all feature hooks
 	 */
 	public function setup() {
+		$settings = $this->get_settings();
+
+		if ( empty( $settings['active'] ) ) {
+			return;
+		}
+
 		add_action( 'admin_enqueue_scripts', [ $this, 'admin_scripts' ] );
 		add_action( 'init', [ $this, 'register_meta' ] );
 
@@ -59,6 +65,40 @@ public function admin_scripts(): void {
 		);
 
 		wp_set_script_translations( 'ep_geo_location_script', 'elasticpress-labs' );
+
+		$settings = $this->get_settings();
+		if ( ! empty( $settings['google_maps_api_key'] ) ) {
+			$google_places_api_url = add_query_arg(
+				[
+					'key'       => $settings['google_maps_api_key'],
+					'libraries' => 'places',
+				],
+				'https://maps.googleapis.com/maps/api/js'
+			);
+
+			wp_enqueue_script(
+				'google-places-api',
+				$google_places_api_url,
+				[],
+				null,
+				true
+			);
+		}
+	}
+
+	/**
+	 * Set the `settings_schema` attribute
+	 */
+	public function set_settings_schema() {
+		$this->settings_schema = [
+			[
+				'default' => '',
+				'help'    => __( 'Add your Google Maps API key.', 'elasticpress-labs' ),
+				'key'     => 'google_maps_api_key',
+				'label'   => __( 'Google Maps API Key', 'elasticpress-labs' ),
+				'type'    => 'text',
+			],
+		];
 	}
 
 	/**
@@ -86,6 +126,17 @@ public function register_meta(): void {
 				'show_in_rest' => true,
 			]
 		);
+
+		register_post_meta(
+			'',
+			'ep_location',
+			[
+				'type'         => 'string',
+				'description'  => 'Location',
+				'single'       => true,
+				'show_in_rest' => true,
+			]
+		);
 	}
 
 	/**