refactored implementation if api key is present and if location is dy…

…namic content

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 }
 									/>
 								</>
 							) : (

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 )
 		} )
 	}
 }

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 }

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',