Map Block, With Asynchronous Loader

client/gutenberg/extensions/map/add-point/index.js

@@ -0,0 +1,45 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { Button, Dashicon, Popover } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+import LocationSearch from '../location-search';
+import './style.scss';
+export class AddPoint extends Component {
+	render() {
+		const { onClose, onAddPoint, onError, api_key } = this.props;
+		return (
+			<Button className="component__add-point">
+				{ __( 'Add marker' ) }
+				<Popover className="component__add-point__popover">
+					<Button className="component__add-point__close" onClick={ onClose }>
+						<Dashicon icon="no" />
+					</Button>
+					<LocationSearch
+						onAddPoint={ onAddPoint }
+						label={ __( 'Add a location' ) }
+						api_key={ api_key }
+						onError={ onError }
+					/>
+				</Popover>
+			</Button>
+		);
+	}
+}
+
+AddPoint.defaultProps = {
+	onAddPoint: () => {},
+	onClose: () => {},
+	onError: () => {},
+};
+
+export default AddPoint;

client/gutenberg/extensions/map/add-point/style.scss

@@ -0,0 +1,53 @@
+/** @format */
+
+.component__add-point {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	z-index: 1;
+	width: 32px;
+	height: 38px;
+	margin-top: -19px;
+	margin-left: -16px;
+	background-image: url( ./oval.svg );
+	background-repeat: no-repeat;
+	text-indent: -9999px;
+	box-shadow: none;
+	background-color: transparent;
+	&.components-button:not( :disabled ):not( [aria-disabled='true'] ):focus {
+		background-color: transparent;
+		box-shadow: none;
+	}
+	&:focus,
+	&:active {
+		background-color: transparent;
+		box-shadow: none;
+	}
+}
+.component__add-point__popover {
+	// Default z-index for components-popover places it above Edit Post Header and Notices
+	&.components-popover,
+	&.components-popover:not( .is-mobile ).is-bottom {
+		z-index: 20;
+	}
+	.components-button:not( :disabled ):not( [aria-disabled='true'] ):focus {
+		background-color: transparent;
+		box-shadow: none;
+	}
+	.components-popover__content {
+		padding: 0.1rem;
+	}
+	.components-location-search {
+		margin: 0.5rem;
+	}
+}
+.component__add-point__close {
+	margin: 0;
+	padding: 0;
+	border: none;
+	box-shadow: none;
+	float: right;
+	path {
+		color: #aaa;
+	}
+}