How to call a PHP variable from JavaScript in laravel?

Question

I'm trying to pass the longitude and latitude of a service to script that generates a google maps. This is my code:

Blade

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize() {
var mapOptions = {
scaleControl: true,
center: new google.maps.LatLng({{$servicio->Longitud}}}, {{$servicio->Latitud}}},
zoom:18
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div class="perfiles">
<legend>Detalle de servicio</legend>
<table class="table">
    <tr><td>Numero de Orden</td><td>{{$servicio->idServicio}}</td></tr>
    <tr><td>Cliente</td><td>{{$servicio->Cliente}}</td></tr>
    <tr><td>Fecha Inicio</td><td>{{$servicio->Hora_Inicio}}</td></tr>
</table>
@if($servicio->Completado)
    <div id="map-canvas" style="width:650px;height:300px;"></div>
    <table>
        <tr><td>{{HTML::image($servicio->RutaFoto1, '', array('width' => '300', 'height' => '300'))}}</td><td>{{HTML::image($servicio->RutaFoto2, '', array('width' => '300', 'height' => '300'))}}</td></tr>
        <tr><td>{{HTML::image($servicio->RutaFoto3, '', array('width' => '300', 'height' => '300'))}}</td><td>{{HTML::image($servicio->RutaFoto4, '', array('width' => '300', 'height' => '300'))}}</td></tr>
    </table>
@endif

Controller

public function doDetail($id){
    $servicio = Servicio::find($id);
    return View::make('detalleservicio', array('servicio' => $servicio));

}

The problem is that the script does not recognize the code laravel or php. How can I fix it?

Answer 1

Here you've got three }}} after Longitud and Latitud. I believe Longitud should be }} and Latitud should be }})

center: new google.maps.LatLng({{$servicio->Longitud}}}, {{$servicio->Latitud}}},

should be:

center: new google.maps.LatLng({{$servicio->Longitud}}, {{$servicio->Latitud}}),

Answer 2

You should either use double curly brackets {{ and }} or triple curly brackets {{{ and }}}. You shouldn't mix one with the other.

Instead of

center: new google.maps.LatLng({{$servicio->Longitud}}}, {{$servicio->Latitud}}},

you should do

center: new google.maps.LatLng({{$servicio->Longitud}}, {{$servicio->Latitud}},

If you were to use {{{ three curly brackets }}} instead of {{ two }} then your output will be escaped, the angular brackets will be converted to HTML entities.

You can read more about echoing data using Blade templating engine here: http://laravel.com/docs/templates#other-blade-control-structures