Php $var in Javascript function Laravel

Question

I pass php $var into Javascript from controller. $var has fetched addresses from DB. And i put it in Javascript. Now i can see the addresses in the console. No problem with that, I don't know why syntax error pop up too.

This is how I insert it into JS.

function initMap(){
        var options = {
            zoom:8,
            center:
                '{!! $estates[0]->address !!}'
        }

        var map = new google.maps.Map(document.getElementById("map"), options);

        var marker = new google.maps.Marker({
            position:
                    @foreach($estates as $addr)
                        '{!! $addr->address !!}',
                    @endforeach
            map:map
        });

        var infoWindow = new google.maps.InfoWindow({
            content:'content here'
        });

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

my foreach running without a problem I can see the addreses in the console but also at this line: '{!! $estates[0]->address !!}' error pops up too. Actually I am seeing the address not this line.

error is this:

Uncaught SyntaxError: Invalid or unexpected token

Do you have any idea? am I making syntax mistake. But if do that then how can I retrieving the addresses at the console?

Also having this error too at the same line:

Undefined variable: estates (View: /var/www/html/laravel/resources/views/layouts/app.blade.php) (View: /var/www/html/laravel/resources/views/layouts/app.blade.php)

Controller

public function index()
{
    $estates = DB::table("allestates")
        ->get();
    return view("home", compact('estates'));
}

the topic is different the duplicated ones. it's not pure JS i am working with Laravel.

@jin Javascript is inside Blade templates, so this should work. PHP in .js files won't work (unless you tell your server to) — user8034901
– user8034901, Commented Dec 4, 2018 at 8:37
Possible duplicate of How to pass variables and data from PHP to JavaScript? — online Thomas
– online Thomas, Commented Dec 4, 2018 at 8:42

Mihai Matei · Accepted Answer · 2018-12-04 09:24:52Z

0

I think one of the addresses contains the ' character. To avoid it use the addslashes function. You could do that in the controller:

public function index()
{
    $estates = DB::table("allestates")->get()->map(function($estate) {
        $estate->address = addslashes($estate->address);
        return $estate;
    });

    return view("home", compact('estates'));
}

And the according js would be:

var options = {
    zoom:8,
    center: new google.maps.LatLng({{$estates[0]->lat}}, {{$estates[0]->long}});
}

Because you have multiple addresses, it means you will have multiple markers too. That being said your code should look something like:

function initMap(){
    var options = {
        zoom:8,
        center: new google.maps.LatLng({{$estates[0]->lat}}, {{$estates[0]->long}});
    }

    var map = new google.maps.Map(document.getElementById("map"), options);
    var infoWindow = new google.maps.InfoWindow({
        content:'content here'
    });
    var markers = [];

   @foreach ($estates as $key => $estate)

    markers[{{$key}}] = new google.maps.Marker({
        position:  new google.maps.LatLng({{$estate->lat}}, {{$estate->long}});
        map: map
    });

    markers[{{$key}}].addListener('click', function () {
        infoWindow.open(map, markers[{{$key}}]);
    });

    @endforeach
}

edited Dec 4, 2018 at 9:24

answered Dec 4, 2018 at 8:46

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mihai Matei Over a year ago

@Snickers make sure that the estates variable is really named like that.. It seems to be some kind of typo

firefly Over a year ago

no problem with the name I checked it but yoru code not worked same error still there

firefly Over a year ago

thanks for update but now i am getting this error. InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object by the way there are 4 addreses in the database. if you delete foreach how can I itarate thoese with marker?

Mihai Matei Over a year ago

Well, now there is another story.. The center property expects an object with latitude and longitude set. You can't pass it an address string. Probably the position too. Also, the implode I wrote does the same thing as your foreach

firefly Over a year ago

I gave the center: city lat and lng but marker need to go with address string. Now error jump to the marker section.

|

Kingslayer · Accepted Answer · 2018-12-04 08:44:45Z

-2

You can use php variables inside laravel blade files as

var options = { zoom:8, center: '{{$estates[0]->address}}' }

answered Dec 4, 2018 at 8:44

Kingslayer

368 bronze badges

Collectives™ on Stack Overflow

Php $var in Javascript function Laravel

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related