Google Maps

The Google Maps Component is designed to:

• Display a customizable Google Map.
• Allow users to configure map colors, location, and markers.
• Use a unique UUID for each map instance.

---

JavaScript Implementation

Block Registration

The block is registered under the namespace basetheme/google-maps.

registerBlockType('basetheme/google-maps', {
    title: 'Googlemaps',
    icon: mapMarker,
    category: 'layout',
    parent: ['basetheme/container', 'basetheme/grid-item'],
    description: 'A Description',
    keywords: [],
    attributes: {
        uuid: { type: 'string', default: '' },
        apiKey: {
            type: 'string',
            default: process.env.GOOGLE_MAPS_API_KEY,
            hidden: true,
        },
        location: { type: 'string', default: 'Hauptsitz' },
        lat: { type: 'string', default: '47.559601' },
        long: { type: 'string', default: '7.588576' },
        street: { type: 'string', default: 'Hauptstrasse' },
        number: { type: 'string', default: '1' },
        zip: { type: 'string', default: '4001' },
        city: { type: 'string', default: 'Basel' },
        email: { type: 'string', default: '' },
        phone: { type: 'string', default: '' },
        colorLandscape: { type: 'string', default: '#FFFFFF' },
        colorRoad: { type: 'string', default: '#808080' },
        colorWater: { type: 'string', default: '#0d3b66' },
        colorPoiPark: { type: 'string', default: '#FFFFFF' },
        colorPoi: { type: 'string', default: '#FFFFFF' },
        enableAdvancedMarker: { type: 'boolean', default: false },
    },
    edit: EditComponent,
    save: () => null,
});

---

Attributes

Attribute	Type	Default	Description
uuid	string	''	Unique ID for the map instance
apiKey	string	API Key	Google Maps API key
location	string	'Hauptsitz'	Location name
lat	string	'47.559601'	Latitude for the map
long	string	'7.588576'	Longitude for the map
street	string	'Hauptstrasse'	Street name
number	string	'1'	Street number
zip	string	'4001'	Postal code
city	string	'Basel'	City
email	string	''	Email address
phone	string	''	Phone number
colorLandscape	string	'#FFFFFF'	Landscape color
colorRoad	string	'#808080'	Road color
colorWater	string	'#0d3b66'	Water color
colorPoiPark	string	'#FFFFFF'	Park color
colorPoi	string	'#FFFFFF'	Point of Interest (POI) color
enableAdvancedMarker	boolean	false	Enable advanced markers

---

Edit Component

The EditComponent manages the block’s behavior and settings in the WordPress editor.

function EditComponent({ attributes, setAttributes }) {
    const { apiKey, lat, long } = attributes;

    useEffect(() => {
        initGoogleMaps();
    }, [apiKey, lat, long]);

    useEffect(() => {
        if (!attributes.uuid) {
            setAttributes({ uuid: uuidv4() });
        }
    }, [attributes.uuid, setAttributes]);

    return (
        <>
            <InspectorControls>
                <MapSettingsPanel
                    attributes={attributes}
                    setAttributes={setAttributes}
                />
                <MapColorsPanel
                    attributes={attributes}
                    setAttributes={setAttributes}
                />
            </InspectorControls>
            <GoogleMapPreview attributes={attributes} />
        </>
    );
}

---

Inspector Panels

Map Settings Panel

function MapSettingsPanel({ attributes, setAttributes }) {
    return (
        <PanelBody title="Google Maps Settings">
            {[
                { label: 'Location', value: attributes.location, key: 'location' },
                { label: 'Latitude', value: attributes.lat, key: 'lat', type: 'number' },
                { label: 'Longitude', value: attributes.long, key: 'long', type: 'number' },
                // Additional settings...
            ].map(({ label, value, key, type }) => (
                <PanelRow key={key}>
                    <InputControl
                        label={label}
                        value={value}
                        type={type || 'text'}
                        onChange={(newValue) =>
                            setAttributes({ [key]: newValue })
                        }
                    />
                </PanelRow>
            ))}
        </PanelBody>
    );
}

Map Colors Panel

function MapColorsPanel({ attributes, setAttributes }) {
    return (
        <PanelBody title="Map Colors">
            {[
                { label: 'Color Landscape', value: attributes.colorLandscape, key: 'colorLandscape' },
                // Additional color settings...
            ].map(({ label, value, key }) => (
                <div key={key}>
                    <label htmlFor={key}>{label}</label>
                    <PanelRow>
                        <ColorPalette
                            disableCustomColors
                            clearable={false}
                            colors={googleMapsColorValues}
                            value={value}
                            onChange={(newColor) =>
                                setAttributes({ [key]: newColor })
                            }
                        />
                    </PanelRow>
                </div>
            ))}
        </PanelBody>
    );
}

---

PHP Implementation

The PHP logic ensures proper initialization and rendering of the map with data attributes for frontend integration.

<div
    class="google-maps-color"
    data-map-colors
    data-map-colors-id="<?php echo $uuid; ?>"
    data-map-colors-landscape="<?php echo $colorLandscape; ?>"
    data-map-colors-road="<?php echo $colorRoad; ?>"
    data-map-colors-water="<?php echo $colorWater; ?>"
    data-map-colors-poi-park="<?php echo $colorPoiPark; ?>"
    data-map-colors-poi="<?php echo $colorPoi; ?>">
</div>
<div
    class="google-maps-wrapper"
    data-map
    data-map-id="<?php echo $uuid; ?>"
    data-api-key="<?php echo $apiKey; ?>"
    data-lat="<?php echo $lat; ?>"
    data-long="<?php echo $long; ?>"
    data-location="<?php echo $location; ?>"
    data-street="<?php echo $street; ?>"
    data-number="<?php echo $number; ?>"
    data-postal-code="<?php echo $zip; ?>"
    data-city="<?php echo $city; ?>"
    data-email="<?php echo $email; ?>"
    data-phone="<?php echo $phone; ?>">
</div>

---

Example Usage

Editor View

1. Configure map settings, such as location, latitude, and longitude.
2. Customize map colors using the color palette.
3. Preview the map in the editor.

Frontend View

<div
    class="google-maps-color"
    data-map-colors
    data-map-colors-id="uuid-12345"
    data-map-colors-landscape="#FFFFFF"
    data-map-colors-road="#808080"
    data-map-colors-water="#0d3b66"
    data-map-colors-poi-park="#FFFFFF"
    data-map-colors-poi="#FFFFFF">
</div>
<div
    class="google-maps-wrapper"
    data-map
    data-map-id="uuid-12345"
    data-api-key="API_KEY_HERE"
    data-lat="47.559601"
    data-long="7.588576"
    data-location="Hauptsitz"
    data-street="Hauptstrasse"
    data-number="1"
    data-postal-code="4001"
    data-city="Basel"
    data-email="contact@example.com"
    data-phone="123456789">
</div>

---

Conclusion

The Google Maps Component provides a flexible solution for integrating Google Maps into WordPress blocks, offering extensive customization for location and appearance.