I have a bit of a dilemma.

In the save function I need to call a function renderMap that renders a dynamic google map. However I need to call it after the DOM has been rendered. I can’t seem to find a solution for this. I realised you can’t add a class to the save function with the React lifecycle so I am stopped. It does work for the edit function though. What are the possibilities?

import { __ } from 'wordpress user/i18n';
import { registerBlockType } from 'wordpress user/blocks';
import { PluginDocumentSettingPanel } from 'wordpress user/edit-post';
import { Component } from 'wordpress user/element';

const renderMap = function() {
    let googleMap = document.getElementById('google-map')
    let map
  map = new google.maps.Map(googleMap, {
    center: { lat: 37.79406, lng: -122.4002 },
    zoom: 14,
    disableDefaultUI: true,
  })
}

registerBlockType( 'splash-blocks/google-maps', { 
    title: __('Google maps locations', 'google-maps'),
    icon: 'megaphone',
    category: 'common',
    keyword: [
        __( 'Display Google maps locations' ),
    ],
    atrributes: {
        markers: {
            type: 'object'
        },
    address: {
        type: 'string',
        default: 'xxxxxxxxx',
        }, 
        api_key: {
        type: 'string',
        default: 'xxxxxxxxx',
        }
    },
    edit: class extends Component {
        constructor(props) {
        super(props)
      }

     componentDidMount() {
            renderMap()
        }

        render() {
            const { attributes, setAttributes } = this.props

            return ( 
                <div id='google-map'>
                </div>
            )
        }
    },
    save: props => {
        const {
      className,
      attributes: { mapHTML }
    } = props;
renderMap()
        return (
            <div id='google-map'>
            </div>
        )
    }
})