diff --git a/src/block/map/edit.js b/src/block/map/edit.js
index 42c5d73cb5..d7989e258e 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( '' )
@@ -210,6 +212,7 @@ const Edit = props => {
useEffect( () => {
if ( mapRef.current ) {
mapRef.current.setOptions( {
+ address,
center: location || DEFAULT_LOCATION,
zoom: zoom || DEFAULT_ZOOM,
fullscreenControl: showFullScreenButton,
@@ -243,6 +246,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,
@@ -259,6 +265,12 @@ const Edit = props => {
}
}, 400 ), [ geocoderRef.current, setAttributes, useGeocoding ] )
+ useEffect( () => {
+ setTimeout( () => {
+ geocodeAddress( mapAddress )
+ }, 8000 )
+ }, [ mapAddress ] )
+
return (
<>
{ isSelected && (
@@ -291,6 +303,9 @@ 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 }
+ isFormatType={ false }
/>
) : (
@@ -537,7 +552,7 @@ const Edit = props => {
) : (
) }
diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
index 3f5a0ade23..14e7c8b554 100644
--- a/src/block/map/editor.scss
+++ b/src/block/map/editor.scss
@@ -37,6 +37,23 @@
}
}
+.stk-control__location-control {
+
+ .components-base-control {
+ width: 100%;
+ }
+
+ .stk-control__reset-button {
+ top: 28px;
+ }
+
+ .components-base-control__help {
+ text-align: justify;
+ hyphens: auto;
+ }
+
+}
+
.stk-block-map__api-key-notice {
margin: 0 0 16px;
}
diff --git a/src/block/map/frontend-map.js b/src/block/map/frontend-map.js
index 15321baed7..3c72c62080 100644
--- a/src/block/map/frontend-map.js
+++ b/src/block/map/frontend-map.js
@@ -41,16 +41,50 @@ 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 ),
+ // }
+ // }
+
+ // Inside a setTimeout since geolocation speed may vary
+ 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 32aedc3129..4130ab328c 100644
--- a/src/block/map/location-control.js
+++ b/src/block/map/location-control.js
@@ -1,12 +1,13 @@
/**
* External dependencies
*/
-import { i18n } from 'stackable'
+import { i18n, isPro } from 'stackable'
+import { DynamicContentControl, useDynamicContentControlProps } from '~stackable/components'
/**
* WordPress dependencies
*/
-import { TextControl } from '@wordpress/components'
+import { TextControl, BaseControl as GutBaseControl } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
import {
useState, useEffect, useRef,
@@ -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,15 +63,28 @@ const LocationControl = props => {
}, [ ref.current, waitForGoogle ] )
return (
- {
- props.onTextChange( value )
- } }
- />
+ 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 )
+ }
+ >
+
+ {
+ props.onTextChange( value )
+ } }
+ />
+
+
)
}
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',
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'