Improve or idea for the code

Hi can you look at my code and tell me if is ok? code work fine but can someone help me improve how this code send event.data from HTML to my JS? i dont know how to make better way to send text and images separately. Thanks.

Here is my HTML code

<html>
<head>
    <title>Wix Code / Google Maps :: Multiple Markers</title>
</head>
<body>
    <div id="map" style="height: 100%; width: 100%;" />
    <script type="text/javascript">

    let stred = {lat: 48.7305939, lng: 19.4570817};

     /**
       * The RestoreControl adds a control to the map that resets the zoom,
       * and recenters the map on Barcelona.
       * This constructor takes the control DIV as an argument.
       * @constructor
       */
       function RestoreControl(controlDiv, map) {
            // Set CSS for the control border.
            var controlUI = document.createElement('div');
            controlUI.style.backgroundColor = '#fff';
            controlUI.style.border = '2px solid #fff';
            controlUI.style.borderRadius = '3px';
            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
            controlUI.style.cursor = 'pointer';
            controlUI.style.marginBottom = '22px';
            controlUI.style.textAlign = 'center';
            controlUI.title = 'Click to reset the map';
            controlDiv.appendChild(controlUI);

            // Set CSS for the control interior.
            var controlText = document.createElement('div');
            controlText.style.color = 'rgb(25,25,25)';
            controlText.style.fontFamily = 'Helvetic Light,sans-serif';
            controlText.style.fontSize = '12px';
            controlText.style.lineHeight = '20px';
            controlText.style.paddingLeft = '5px';
            controlText.style.paddingRight = '5px';
            controlText.innerHTML = 'Obnovit';
            controlUI.appendChild(controlText);

            // Setup the click event listeners: simply set the map to Chicago.
            controlUI.addEventListener('click', function() {
                map.setCenter(stred);
                map.setZoom(7);
            });
        }

        let locations = null;
        function init() {
            if(locations === null) { // if no locations, let page know
                window.parent.postMessage("hello", "*");
            }
            window.onmessage = (event) => {
                if (event.data) {
                    locations = event.data.markers;
                    let infowindow = new google.maps.InfoWindow();
                    let map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 7,
                        streetViewControl: false,
                        center: stred 
                    });
                    var markers = locations.map(function (location) {
                        let marker = new google.maps.Marker({
                            position: location.position,
                            map: map
                        })
                        google.maps.event.addListener(marker, 'mouseover', (function (marker) {
                            return function () {
                                infowindow.setContent(location.title);                                   
                                infowindow.open(map, marker);
                            }
                        })(marker));
                        google.maps.event.addListener(marker, 'mouseout', (function (marker) {
                            return function () {
                                infowindow.close();
                            }
                        })(marker));
                        google.maps.event.addListener(marker, 'click', (function (marker) {
                            window.parent.postMessage(location.picture, "*");
                            window.parent.postMessage(location.title, "*");
                        })); 
                        return marker;
                    });
                    // Add a marker clusterer to manage the markers.
                    var markerCluster = new MarkerClusterer(map, markers,
                        { gridSize: 20, maxZoom: 3, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

                    // Create the DIV to hold the control and call the CenterControl()
                    // constructor passing in this DIV.
                    var restoreControlDiv = document.createElement('div');
                    var restoreControl = new RestoreControl(restoreControlDiv, map);

                    restoreControlDiv.index = 1;
                    map.controls[google.maps.ControlPosition.TOP_CENTER].push(restoreControlDiv);                        
                }
            }
        }
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>    
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=init">
    </script>
</body>
</html>

Here is JS

import {getLocations} from 'backend/locations';

$w.onReady(function () {
    sendLocations();
    $w("#html1").onMessage( (event) => {
        if(event.data === 'hello') {
            sendLocations();
        }
        else {
            $w('#image1').src = event.data;
            $w('#text15').text = "Miesto: "+ event.data;
        }
        console.log (event.data)
    } );
});

function sendLocations() {
    getLocations().then((locations) => {
        let markers = [];
        for (let i = 0; i < locations.length; i++) {
            let loc = locations[i];
            markers.push({title :loc.title, position: {lat: loc.latitude, lng: loc.longitude},picture: loc.image});
        }
        $w('#html1').postMessage({markers});
        
    });
}

is better way to sending data to HTML can i use getCurrentItem here and exclude part with for loop?

Thanks.

You can post the data together.
Something like:

//iframe
//...
window.parent.postMessage({picture: location.picture, title: location.title} , "*");
//...
//parent page
//..
$w("#html1").onMessage( ({data}) => {
    const {picture, title} = data;
    //....
     $w('#image1').src = picture;
     $w('#text15').text = "Miesto: "+ title;
})