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

Question

I'm using Google Maps API to build a MAP with users on it.

So I wanted to add info windows on my map, that works !

But I also wanted to insert avatar and a link to the user's profile, so I'm using Blade for this.

Everything works fine, apart of the blade's parts.

I tried different way of writing it.

var contentString = '<div id="content">' +
                '<h1 id="firstHeading" class="firstHeading">' +
                usersMapInfos[i].username + '</h1>' +
                '<img class="img-thumbnail" src="{{ asset(' + '<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>';

So this line :

+'<img class="img-thumbnail" src="{{ asset(img/uploads/avatars/ . ' + usersMapInfos[i].avatar + ') }}" >' +

And this line :

+'<p> <a href="{{ route(profiles.show, ' + usersMapInfos[i].id + ') }}"></a></p>' +

Edit

So I changed my way of doing it as my infoWindows are build within a for loop, inside my Javascript code and I cannot create some divs in my view.

What I've done is simply using Javascript methods instead of looking to use blade.

'<img class="img-thumbnail" src="'+ window.location.href + "img/uploads/avatars/" + usersMapInfos[i].avatar + '" >'

The JS file on Github The Blade file

Mohamed Ahmed · Answer 1 · 2019-08-17T18:27:33.507

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);});

        }

Your idea was good, but it doesn't work. I even tried surrounding imageSource and Route by JSON.parse() like so : https://stackoverflow.com/questions/29308441/using-javascript-to-display-laravels-variable But nothing is working. Can we really pass some blades codes into JS variables? — Mke Nt, Aug 17 '19 at 12:32
Well there is one other way. Use data attribute from JQuery to be able to get the data. Do you want an example? — Mohamed Ahmed, Aug 17 '19 at 12:34
Thanks for your answer, I guess it'll be the good one for those who have to modify an existing div in their views. But because mine are created into a loop and within a map, I chose to simply use a javascript method, which is the simplest way in my case. — Mke Nt, Aug 17 '19 at 13:29
Are you able to post your full code on git or something so I can correct whatever issue is going on? — Mohamed Ahmed, Aug 17 '19 at 14:55
Yes, I edited my question. Check the links at the bottom please. — Mke Nt, Aug 17 '19 at 16:04
What seems to be the exact issue? Because I don't see any problem with this code. And using `window.location.href` is nothing wrong. Although I would very much recommend using `window.location.origin` and start from there. See my updated answer for the updated JS. Other than that, everything is fine! — Mohamed Ahmed, Aug 17 '19 at 18:27

score 0 · Answer 2 · answered Aug 17 '19 at 10:07

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>';

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

2 Answers2