Displaying google map and plotting marker dynamically form result

//This script is must for initMap method to work
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGnSLZ6FtSfT1Pyn-_k-GTwIoLqep_wTU&libraries=places&callback=initAutocomplete"
    async defer></script>
function initMap() {
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: 46.397, lng: 7.644}, // This can be any default center
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    if (typeof searchResults !== 'undefined') {
        searchResults.forEach(function(result) {
            var position = new google.maps.LatLng(parseFloat(result.lat_add), parseFloat(result.long_add));
            var marker = new google.maps.Marker({
                position: position,
                map: map,
                title: result.pro_name
            });
            bounds.extend(position); // Extend the bounds to include each marker's position
            marker.addListener('click', function() {
                window.location.href = '/index.php/component/osproperty/' + result.pro_alias;
            });
        });

        map.fitBounds(bounds); // Adjust the map to show all markers
    }
};