How to use this code in javascript lan and lng {{ $data->latitude }}, {{ $data->longitude }} in this function

var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:, lng: },
zoom: 13,
mapTypeId: 'roadmap'

How to use this code in javascript lan and lng {{ $data->latitude }}, {{ $data->longitude }} in this function

var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:, lng: },
zoom: 13,
mapTypeId: 'roadmap'

• javascript
• laravel

5 Answers 5

Good practice is to pass serialized or raw data to some element, for example hidden input:

{!! Form::hidden('lat', $lat) !!}
{!! Form::hidden('lng', $lng) !!}

And then get it with JS from these elements. jQuery example:

var lat = $('[name="lat"]').val();

Sometimes it's better to use AJAX query to get some data from DB dynamically.

Simple way:

var latInfo = '{{ $data->latitude }}';
var lngInfo = '{{ $data->longitude }}';
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat:latInfo, lng:lngInfo},
zoom: 13,
mapTypeId: 'roadmap'

This will be very simple if you want to write a php code then instead using laravel Blade templating engine you rather prefer to use

<?= $data->latitude ?>

but on the other hand, if the data isn't there, you should also check it too. Like using isset() function whether its set or not.

var map = new google.maps.Map(document.getElementById('map'), {
center: {<?=  $data->latitude ?>, <?=  $data->longitude ?>} ,
zoom: 13,
mapTypeId: 'roadmap'

Always prefer to check if the variable is set or not .. hope this will help you in future

Try like this

var lat = <?php $data->latitude ?>
var lng = <?php $data->longitude ?>

And also do like this

var lat = $('#longitude').val();//set value 
var lng = $('#latitude').val();

if your javascript is inside laravel blade this should work

var map = new google.maps.Map(document.getElementById('map'), {
center: {
   lat:{{ $data->latitude }}, 
   lng:{{ $data->longitude }}
},
zoom: 13,
mapTypeId: 'roadmap'