Passing php var to javascript in Laravel

Question

I am trying to pass php $var to Javascript in google map script. I have address table in DB. And with controller I fetch it to view and now try to pass it in Javascript and iterate it.

But having some trouble I think my code a bit corrupted. By the way I dont have lat and lng, just addresses.

function initMap(){
        var options = {
            zoom:8,
            center:
            @foreach($address as $addr){
               {!! $addr->address !!} 
            }
            @endforeach
        }

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

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

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

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

    }

And Map API calling

<script async defer
       src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=initMap"></script>

controller

public function index()
{

    $address = DB::table("allestates")
        ->get();

    return view("home", compact('address'));

}

Address column in DB:

It looks like you are doing right however I think your problem might be that you are giving multiple lat & lng for the center which I believe should be a single location for the center of the map to to. — Josh Young
– Josh Young, Commented Dec 4, 2018 at 1:50
I update the code, check the question!. but still no map? @Josh — firefly
– firefly, Commented Dec 4, 2018 at 2:02
Can you please add the code that you get the $address variable from? — Josh Young
– Josh Young, Commented Dec 4, 2018 at 2:08
I added the controller, updated question. By the way I dont have lat lng in the database, just pure addresses @Josh — firefly
– firefly, Commented Dec 4, 2018 at 2:16
I already the add the image of the column in the question. It's japanese though :) but addresses@Josh — firefly
– firefly, Commented Dec 4, 2018 at 2:34

Josh Young · Accepted Answer · 2018-12-04 02:42:51Z

2

I see a few things that could be causing the issue

Try this:

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

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

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

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

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

}

So first of all the @foreach (...) does not use { or }

Second you want to output any information that is not only numeric inside of quotes

Hope this helps

answered Dec 4, 2018 at 2:42

Josh Young

1,36612 silver badges29 bronze badges

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

4 Comments

firefly Over a year ago

ah, right that's my rookie mistake. Thanks a lot this solved the problem! By the way one last question. Do i need to use API key in like this {{env("api key")}} or just copy the key? like in the question?

Josh Young Over a year ago

I would use {{ env('GOOGLE_MAPS_API') }} as this will allow you to change the key in the future and update it everywhere that you use it. I would however make sure you limit the use of it as it will be public

firefly Over a year ago

hm, it's good idea. but in the .env file there is no google map api section. How to create it? sorry for the burden. Do i need to open another question for this? :)

Josh Young Over a year ago

just add GOOGLE_MAPS_API={google maps api here} and it will auto pick it up however it is probs better practice to do this through config files. Look here for details laravel.com/docs/5.7/…

Collectives™ on Stack Overflow

Passing php var to javascript in Laravel

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related