From 4b00ab085f404f5d44e439f99acb9568f598ad99 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Tue, 12 Mar 2024 10:26:17 +0800
Subject: [PATCH 01/11] allow dynamic content in map location

---
 src/block/map/edit.js             |  8 ++++++-
 src/block/map/editor.scss         | 16 ++++++++++++++
 src/block/map/location-control.js | 36 +++++++++++++++++++++++--------
 3 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/block/map/edit.js b/src/block/map/edit.js
index 42c5d73cb5..fe79809916 100644
--- a/src/block/map/edit.js
+++ b/src/block/map/edit.js
@@ -23,6 +23,7 @@ import {
 	PanelAdvancedSettings,
 	ResizerTooltip,
 	StyleControl,
+	getDynamicContent,
 } from '~stackable/components'
 import { useDeviceType } from '~stackable/hooks'
 import {
@@ -104,6 +105,7 @@ const Edit = props => {
 
 	const { stackable_google_maps_api_key: apiKey } = settings
 	const userCanManageApiKey = useMemo( () => currentUserHasCapability( 'manage_options' ), [] )
+	const mapAddress = address.startsWith( '!#stk_dynamic/' ) ? getDynamicContent( address ) : address
 
 	// This just forces the tooltip to update.
 	const [ , setResizingHeight ] = useState( '' )
@@ -243,6 +245,9 @@ const Edit = props => {
 	// Try geocoding the address.
 	const [ useGeocoding, setUseGeocoding ] = useState( true )
 	const geocodeAddress = useCallback( debounce( address => {
+		if ( address.startsWith( '!#stk_dynamic/' ) ) {
+			address = getDynamicContent( address )
+		}
 		if ( useGeocoding ) {
 			geocoderRef.current.geocode( {
 				address,
@@ -291,6 +296,7 @@ const Edit = props => {
 										label={ __( 'Location', i18n ) }
 										attribute="address"
 										placeholder={ __( 'Enter an address or location', i18n ) }
+										isDynamic={ true }
 									/>
 								</>
 							) : (
@@ -537,7 +543,7 @@ const Edit = props => {
 					) : (
 						<iframe
 							title={ __( 'Embedded content from Google Map Platform.', i18n ) }
-							src={ `https://maps.google.com/maps?q=${ address || DEFAULT_ADDRESS }&t=&z=${ zoom || DEFAULT_ZOOM }&ie=UTF8&output=embed` }
+							src={ `https://maps.google.com/maps?q=${ mapAddress || DEFAULT_ADDRESS }&t=&z=${ zoom || DEFAULT_ZOOM }&ie=UTF8&output=embed` }
 							frameBorder="0"
 						/>
 					) }
diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 3f5a0ade23..6d80d5f6ac 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -37,6 +37,22 @@
 	}
 }
 
+.stk-control__location-control {
+	display: flex;
+
+	> :not(.stk--has-dynamic-content) {
+		.stk-dynamic-content-control__button {
+			margin-top: 23px;
+		}
+	}
+
+	.stk-control__reset-button {
+		position: static;
+		margin-left: 2px;
+		margin-right: 2px;
+	}
+}
+
 .stk-block-map__api-key-notice {
 	margin: 0 0 16px;
 }
diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
index 32aedc3129..a1c6882db4 100644
--- a/src/block/map/location-control.js
+++ b/src/block/map/location-control.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { i18n } from 'stackable'
+import { DynamicContentControl, useDynamicContentControlProps } from '~stackable/components'
 
 /**
  * WordPress dependencies
@@ -20,6 +21,14 @@ import {
 const LocationControl = props => {
 	const [ waitForGoogle, setWaitForGoogle ] = useState( 0 )
 
+	const dynamicContentProps = useDynamicContentControlProps( {
+		value: props.value,
+		onChange: value => {
+			props.onTextChange( value )
+		},
+		isFormatType: false,
+	} )
+
 	useEffect( () => {
 		if ( ! window?.google?.maps ) {
 			const interval = setInterval( () => {
@@ -54,21 +63,30 @@ const LocationControl = props => {
 	}, [ ref.current, waitForGoogle ] )
 
 	return (
-		<TextControl
-			label={ __( 'Location', i18n ) }
-			ref={ ref }
-			value={ props.value }
-			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
-			onChange={ value => {
-				props.onTextChange( value )
-			} }
-		/>
+		<div className="stk-control__location-control">
+			<DynamicContentControl
+				enable={ true }
+				hasPanelModifiedIndicator={ true }
+				{ ...dynamicContentProps }
+			>
+				<TextControl
+					label={ __( 'Location', i18n ) }
+					ref={ ref }
+					value={ props.value }
+					help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
+					onChange={ value => {
+						props.onTextChange( value )
+					} }
+				/>
+			</DynamicContentControl>
+		</div>
 	)
 }
 
 LocationControl.defaultProps = {
 	onChange: null,
 	value: '',
+	hasPanelModifiedIndicator: true,
 }
 
 export default LocationControl

From a0dbc4a5cb1cac343be860e14037eb851f6f1758 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Fri, 15 Mar 2024 01:26:34 +0800
Subject: [PATCH 02/11] export useDynamicContentControlProps from index

---
 src/components/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/index.js b/src/components/index.js
index bee82aeb75..53adb1261f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -100,7 +100,7 @@ export {
 export { default as Div } from './div'
 export { default as ControlIconToggle } from './control-icon-toggle'
 export {
-	default as DynamicContentControl, useDynamicContent, getDynamicContent,
+	default as DynamicContentControl, useDynamicContent, getDynamicContent, useDynamicContentControlProps,
 } from './dynamic-content-control'
 export { default as Separator2 } from './separator2'
 export { default as ColumnInnerBlocks } from './column-inner-blocks'

From b32153bbec0e5e330da58cfcbac2e04b9d79715f Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 08:21:21 +0800
Subject: [PATCH 03/11] added tooltip

---
 src/block/map/edit.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/block/map/edit.js b/src/block/map/edit.js
index fe79809916..283a106ff7 100644
--- a/src/block/map/edit.js
+++ b/src/block/map/edit.js
@@ -296,6 +296,7 @@ const Edit = props => {
 										label={ __( 'Location', i18n ) }
 										attribute="address"
 										placeholder={ __( 'Enter an address or location', i18n ) }
+										help={ __( 'Type in a pair of latitude longitude coordinates.', i18n ) }
 										isDynamic={ true }
 									/>
 								</>

From 72434456393a451cfc56d2d16e323da3f4af9892 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 08:22:15 +0800
Subject: [PATCH 04/11] refactored location control implementation

---
 src/block/map/editor.scss         |  9 ++-----
 src/block/map/location-control.js | 40 ++++++++++++++++---------------
 2 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 6d80d5f6ac..7cfd8d9f41 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -40,15 +40,10 @@
 .stk-control__location-control {
 	display: flex;
 
-	> :not(.stk--has-dynamic-content) {
-		.stk-dynamic-content-control__button {
-			margin-top: 23px;
-		}
-	}
-
 	.stk-control__reset-button {
 		position: static;
-		margin-left: 2px;
+		margin-top: 2px;
+		margin-left: 60px;
 		margin-right: 2px;
 	}
 }
diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
index a1c6882db4..54252b952c 100644
--- a/src/block/map/location-control.js
+++ b/src/block/map/location-control.js
@@ -7,7 +7,7 @@ import { DynamicContentControl, useDynamicContentControlProps } from '~stackable
 /**
  * WordPress dependencies
  */
-import { TextControl } from '@wordpress/components'
+import { TextControl, BaseControl as GutBaseControl } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
 import {
 	useState, useEffect, useRef,
@@ -63,30 +63,32 @@ const LocationControl = props => {
 	}, [ ref.current, waitForGoogle ] )
 
 	return (
-		<div className="stk-control__location-control">
-			<DynamicContentControl
-				enable={ true }
-				hasPanelModifiedIndicator={ true }
-				{ ...dynamicContentProps }
-			>
-				<TextControl
-					label={ __( 'Location', i18n ) }
-					ref={ ref }
-					value={ props.value }
-					help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
-					onChange={ value => {
-						props.onTextChange( value )
-					} }
-				/>
-			</DynamicContentControl>
-		</div>
+		<GutBaseControl
+			label={ __( 'Location', i18n ) }
+			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
+		>
+			<div className="stk-control__location-control">
+				<DynamicContentControl
+					enable={ true }
+					hasPanelModifiedIndicator={ true }
+					{ ...dynamicContentProps }
+				>
+					<TextControl
+						ref={ ref }
+						value={ props.value }
+						onChange={ value => {
+							props.onTextChange( value )
+						} }
+					/>
+				</DynamicContentControl>
+			</div>
+		</GutBaseControl>
 	)
 }
 
 LocationControl.defaultProps = {
 	onChange: null,
 	value: '',
-	hasPanelModifiedIndicator: true,
 }
 
 export default LocationControl

From 1e6c25388541f45c0deb27e51d2d551ea2d54e8a Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 12:57:33 +0800
Subject: [PATCH 05/11] changed styling

---
 src/block/map/editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 7cfd8d9f41..77dc450917 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -43,7 +43,7 @@
 	.stk-control__reset-button {
 		position: static;
 		margin-top: 2px;
-		margin-left: 60px;
+		margin-left: 2px;
 		margin-right: 2px;
 	}
 }

From 3bce897f6fe4800729adba1d3716be4f4122f3d4 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 13:14:47 +0800
Subject: [PATCH 06/11] added styling to controls

---
 src/block/map/editor.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 77dc450917..f1f7c1c637 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -46,6 +46,10 @@
 		margin-left: 2px;
 		margin-right: 2px;
 	}
+
+	.components-text-control__input {
+		width: 240px;
+	}
 }
 
 .stk-block-map__api-key-notice {

From 6acecf0a3bd568e9fa3c6fb8f558c43b3acd7949 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 13:30:11 +0800
Subject: [PATCH 07/11] changed styling

---
 src/block/map/editor.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index f1f7c1c637..84be1eaea9 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -43,12 +43,12 @@
 	.stk-control__reset-button {
 		position: static;
 		margin-top: 2px;
-		margin-left: 2px;
+		margin-left: 4px;
 		margin-right: 2px;
 	}
 
 	.components-text-control__input {
-		width: 240px;
+		width: 224px;
 	}
 }
 

From ce24dd45c27e9e688d706d62e3caded89abeb929 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 22:36:30 +0800
Subject: [PATCH 08/11] added classname and refactored styling

---
 src/block/map/editor.scss         | 13 +++++--------
 src/block/map/location-control.js |  1 +
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 84be1eaea9..7f44a46b4f 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -38,18 +38,15 @@
 }
 
 .stk-control__location-control {
-	display: flex;
 
-	.stk-control__reset-button {
-		position: static;
-		margin-top: 2px;
-		margin-left: 4px;
-		margin-right: 2px;
+	.components-base-control {
+		width: 100%;
 	}
 
-	.components-text-control__input {
-		width: 224px;
+	.stk-control__reset-button {
+		top: 28px;
 	}
+
 }
 
 .stk-block-map__api-key-notice {
diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
index 54252b952c..48d6e5285c 100644
--- a/src/block/map/location-control.js
+++ b/src/block/map/location-control.js
@@ -64,6 +64,7 @@ const LocationControl = props => {
 
 	return (
 		<GutBaseControl
+			className="stk-control"
 			label={ __( 'Location', i18n ) }
 			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
 		>

From 5ace93523d643e3e6b7e5bba84f889abaa7b0819 Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Wed, 20 Mar 2024 22:46:11 +0800
Subject: [PATCH 09/11] refactored structure and added styling for help tip

---
 src/block/map/editor.scss         |  5 +++++
 src/block/map/location-control.js | 30 ++++++++++++++----------------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 7f44a46b4f..14e7c8b554 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -47,6 +47,11 @@
 		top: 28px;
 	}
 
+	.components-base-control__help {
+		text-align: justify;
+		hyphens: auto;
+	}
+
 }
 
 .stk-block-map__api-key-notice {
diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
index 48d6e5285c..cfd430a09d 100644
--- a/src/block/map/location-control.js
+++ b/src/block/map/location-control.js
@@ -64,25 +64,23 @@ const LocationControl = props => {
 
 	return (
 		<GutBaseControl
-			className="stk-control"
+			className="stk-control stk-control__location-control"
 			label={ __( 'Location', i18n ) }
 			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
 		>
-			<div className="stk-control__location-control">
-				<DynamicContentControl
-					enable={ true }
-					hasPanelModifiedIndicator={ true }
-					{ ...dynamicContentProps }
-				>
-					<TextControl
-						ref={ ref }
-						value={ props.value }
-						onChange={ value => {
-							props.onTextChange( value )
-						} }
-					/>
-				</DynamicContentControl>
-			</div>
+			<DynamicContentControl
+				enable={ true }
+				hasPanelModifiedIndicator={ true }
+				{ ...dynamicContentProps }
+			>
+				<TextControl
+					ref={ ref }
+					value={ props.value }
+					onChange={ value => {
+						props.onTextChange( value )
+					} }
+				/>
+			</DynamicContentControl>
 		</GutBaseControl>
 	)
 }

From 5c58f83c7a058bd99fbdee1268fe0be7ca117b8a Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Sat, 20 Apr 2024 01:43:38 +0800
Subject: [PATCH 10/11] refactored implementation if api key is present and if
 location is dynamic content

---
 src/block/map/edit.js             |  8 ++++++
 src/block/map/frontend-map.js     | 47 ++++++++++++++++++++++++++-----
 src/block/map/location-control.js |  7 +++--
 src/block/map/save.js             |  8 ++++--
 4 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/block/map/edit.js b/src/block/map/edit.js
index 283a106ff7..d7989e258e 100644
--- a/src/block/map/edit.js
+++ b/src/block/map/edit.js
@@ -212,6 +212,7 @@ const Edit = props => {
 	useEffect( () => {
 		if ( mapRef.current ) {
 			mapRef.current.setOptions( {
+				address,
 				center: location || DEFAULT_LOCATION,
 				zoom: zoom || DEFAULT_ZOOM,
 				fullscreenControl: showFullScreenButton,
@@ -264,6 +265,12 @@ const Edit = props => {
 		}
 	}, 400 ), [ geocoderRef.current, setAttributes, useGeocoding ] )
 
+	useEffect( () => {
+		setTimeout( () => {
+			geocodeAddress( mapAddress )
+		}, 8000 )
+	}, [ mapAddress ] )
+
 	return (
 		<>
 			{ isSelected && (
@@ -298,6 +305,7 @@ const Edit = props => {
 										placeholder={ __( 'Enter an address or location', i18n ) }
 										help={ __( 'Type in a pair of latitude longitude coordinates.', i18n ) }
 										isDynamic={ true }
+										isFormatType={ false }
 									/>
 								</>
 							) : (
diff --git a/src/block/map/frontend-map.js b/src/block/map/frontend-map.js
index 15321baed7..8d9baa0144 100644
--- a/src/block/map/frontend-map.js
+++ b/src/block/map/frontend-map.js
@@ -41,16 +41,49 @@ class StackableMap {
 			const markerOptions = JSON.parse( mapCanvas.dataset.markerOptions || 'false' )
 			const markerIconOptions = JSON.parse( mapCanvas.dataset.iconOptions || '{}' )
 
+			// Hello Jami, I implemented a way where it doesnt have to be coordinates only haha.
+			// But if you do not like it just: remove the if and other variables, move the block of code outside of the setTimeout,
+			// and uncomment the if which is the implementation you originally mentioned
+
 			// eslint-disable-next-line no-undef
-			const map = new google.maps.Map( mapCanvas, mapOptions )
-			if ( markerOptions ) {
-				markerOptions.map = map
-				markerOptions.clickable = false
+			const geocoder = new google.maps.Geocoder()
 
-				// eslint-disable-next-line no-undef
-				const marker = new google.maps.Marker( markerOptions )
-				marker.setIcon( markerIconOptions )
+			let duration = 0
+			// If coordinates is just a string, turn it into an object
+			if ( typeof mapOptions.center === 'string' ) {
+				duration = 500
+				geocoder.geocode( {
+					address: mapOptions.center,
+				}, ( results, status ) => {
+					if ( status === 'OK' ) {
+						mapOptions.center = {
+							lat: parseFloat( results[ 0 ].geometry.location.lat() ),
+							lng: parseFloat( results[ 0 ].geometry.location.lng() ),
+						}
+					}
+				} )
 			}
+
+			// if ( mapOptions.center.match( /^\s*[-\d.]+(.*?)[, ][-\d.]+/ ) ) { // Check if there's a number comma/space number.
+			// 	const [ , lat, , lng ] = mapOptions.center.match( /^\s*([-\d.]+)(.*?)([-\d.]+)/ )
+			// 	mapOptions.center = {
+			// 		lat: parseFloat( lat ),
+			// 		lng: parseFloat( lng ),
+			// 	}
+			// }
+
+			setTimeout( () => {
+				// eslint-disable-next-line no-undef
+				const map = new google.maps.Map( mapCanvas, mapOptions )
+				if ( markerOptions ) {
+					markerOptions.map = map
+					markerOptions.clickable = false
+
+					// eslint-disable-next-line no-undef
+					const marker = new google.maps.Marker( markerOptions )
+					marker.setIcon( markerIconOptions )
+				}
+			}, duration )
 		} )
 	}
 }
diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
index cfd430a09d..4130ab328c 100644
--- a/src/block/map/location-control.js
+++ b/src/block/map/location-control.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { i18n } from 'stackable'
+import { i18n, isPro } from 'stackable'
 import { DynamicContentControl, useDynamicContentControlProps } from '~stackable/components'
 
 /**
@@ -66,7 +66,10 @@ const LocationControl = props => {
 		<GutBaseControl
 			className="stk-control stk-control__location-control"
 			label={ __( 'Location', i18n ) }
-			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
+			help={ ! isPro
+				? __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n )
+				: __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled. Dynamic Content only allows latitude longtitude coordinates', i18n )
+			}
 		>
 			<DynamicContentControl
 				enable={ true }
diff --git a/src/block/map/save.js b/src/block/map/save.js
index df4f658c37..81c9ccda48 100644
--- a/src/block/map/save.js
+++ b/src/block/map/save.js
@@ -50,7 +50,7 @@ export const Save = props => {
 
 	const responsiveClass = getResponsiveClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
-
+	let tempLocation = location
 	const blockClassNames = classnames( [
 		props.className,
 		'stk-block-map',
@@ -60,9 +60,13 @@ export const Save = props => {
 		'stk--uses-api-key': usesApiKey,
 	} )
 
+	if ( address.startsWith( '!#stk_dynamic/' ) ) {
+		tempLocation = address
+	}
+
 	const styles = getMapStyles( attributes )
 	const mapOptions = {
-		center: location || DEFAULT_LOCATION,
+		center: tempLocation || DEFAULT_LOCATION,
 		zoom: zoom || DEFAULT_ZOOM,
 		styles: styles.length ? styles : undefined,
 		gestureHandling: isDraggable ? undefined : 'none',

From 6fb87ef94677b51429d2b0771d817babcdd8540e Mon Sep 17 00:00:00 2001
From: prconcepcion <pioconcepcion3@yahoo.com>
Date: Sat, 20 Apr 2024 01:44:43 +0800
Subject: [PATCH 11/11] added a comment

---
 src/block/map/frontend-map.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/block/map/frontend-map.js b/src/block/map/frontend-map.js
index 8d9baa0144..3c72c62080 100644
--- a/src/block/map/frontend-map.js
+++ b/src/block/map/frontend-map.js
@@ -72,6 +72,7 @@ class StackableMap {
 			// 	}
 			// }
 
+			// Inside a setTimeout since geolocation speed may vary
 			setTimeout( () => {
 				// eslint-disable-next-line no-undef
 				const map = new google.maps.Map( mapCanvas, mapOptions )