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] 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 283a106ff..d7989e258 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 15321baed..8d9baa014 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 cfd430a09..4130ab328 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 df4f658c3..81c9ccda4 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',