How to add html + blade into javascript variable for google maps api

Try this one

    var contentString = '<div id="content">' +
        '<h1 id="firstHeading" class="firstHeading">' +
        usersMapInfos[i].username + '</h1>' +
        '<img class="img-thumbnail" src="{!! asset('img/uploads/avatars/' . usersMapInfos[i].avatar) !!}" >' +
        '<div id="bodyContent">' +
        '<p>' + usersMapInfos[i].description + '</p>' +
        '<p> <a href="{!! route('profiles.show', usersMapInfos[i].id) !!}"></a></p>' +
        '</div>' +
        '</div>';

I can not comment but I hope this answer helps.

The reason why it is not working is because of how you are trying to fetch it. Here is another way you could do it.

//Use a variable to assign it instead of using inline blade syntax inside js html content
var imageSource = {{ asset('img/uploads/avatars/') }}

//Same for the other one
var Route = {{ route(profiles.show, ' + usersMapInfos[i].id + ') }}

var contentString = '<div id="content">' +
                '<h1 id="firstHeading" class="firstHeading">' +
                usersMapInfos[i].username + '</h1>' +

                //Not sure why you have an image tag inside the source of another img tag
                //I will remove this and make it one for the sake of this example

                '<img class="img-thumbnail" src=" ' + imageSource + usersMapInfos[i].avatar + '" >' +

                '<div id="bodyContent">' +
                '<p>' + usersMapInfos[i].description + '</p>' +
                '<p> <a href="' + Route + '"></a></p>' +
                '</div>' +
                '</div>';

So basically, assign route and asset to js variables and give the variables to the js file. Hope this helps. Happy Coding! :)

Edit:

You can also use the data attribute in JQuery. Basically just assign the data attribute to an element on your html. You have mentioned in the question that you are using your JS in the same blade file. With this method, you can pass this value to an external JS file as well. Here is an example. Hope this helps you get started:

//In your html, create a sample element. I will create a div for now
//This div assumes that this is a container for the map or something

<div id="container" data-imgsource="{{ asset('img/uploads/avatars/') }}" ></div>

//Now you can call this data attribute from your js code whether the js is in your blade file or in an external js file. Do this

$('#container').data("imgsource") //Voila. Now you have the link
//Put this in a variable and pass it in to your code. Like so:
var imageRouteLink = $('#container').data("imgsource") //Voila. Now you have the link

Personally, I use this method for many of my Ajax and other requests because this is more clean and lets me use external JS rather than using my JS inside blade. Of course there is nothing wrong with using a small bit of JS in your blade but too many can lead to a headache later on.

UPDATE

Here is the updated JS Code:

var url_origin   = window.location.origin;

        for (let i = 0; i < usersMapInfos.length; i++) {
            const contentString = '<div id="content">' +
                '<a href="' + url_origin + "/profiles/" + usersMapInfos[i].id + '">' +
                '<h1 id="firstHeading" class="firstHeading">' +
                usersMapInfos[i].username + '</h1></a>' +
                '<img class="img-thumbnail" src="' + url_origin + "/img/uploads/avatars/" + usersMapInfos[i].avatar + '" >' +
                '<br>' +
                '<div id="bodyContent">' +
                '<p>' + usersMapInfos[i].description + '</p>' +
                '</div>' +
                '</div>';

            const infowindow = new google.maps.InfoWindow({content: contentString});
            const latLng = new google.maps.LatLng(usersMapInfos[i].address_latitude, usersMapInfos[i].address_longitude);
            const marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title: usersMapInfos[i].username
            });

            marker.addListener('click', function() {infowindow.open(map, marker);});

        }