Javascript with Custom HTML Blocks (Workspace)?

I am trying to build a Custom HTML block that uses Google Maps. The map doesn’t load and there is nothing in the console. There doesn’t seem to be any documentation from Frappe on how to use this.

  <h1>Google Map Example</h1>
    <!-- Map container -->
    <div id="map"></div>
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded. Initializing Google Map.');

    // Load the Google Maps API script
    var script = document.createElement('script');
    script.src = '';
    script.defer = true;

    script.onload = function() {
        console.log('Google Maps API script loaded.');

        // Initialize Google Map
        function initMap() {
            console.log('Initializing map...');
            const centerCoordinates = { lat: 40.7128, lng: -74.0060 }; // Example coordinates (New York City)
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: centerCoordinates,

            const marker = new google.maps.Marker({
                position: centerCoordinates,
                map: map,
                title: "Marker Title",

        // Call initMap when the page is fully loaded
        window.onload = function() {
            console.log('Page fully loaded. Initializing map.');

            height: 400px;
            width: 100%;

I too am looking for instructions/examples on how to use custom HTML blocks.
There is no mention of it in either location:

Hi @volkswagner:

Take a look here :sweat_smile:

Thank you @avc that was very helpful. I was able to correct the code using that video.