How to send map coordinates to javascript file - with Laravel? - php

Question

I have a contact page. This page contains map information. This map is generated by the script file. How do I change the coordinates dynamically?
Js file content;
var MY_MAPTYPE_ID = 'style_KINESB';
function initialize() {
var featureOpts = [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#666666"
}
]
},
{
"featureType": 'all',
"elementType": 'labels',
"stylers": [
{ visibility: 'simplified' }
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#e2e2e2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#aadaff"
},
{
"visibility": "on"
}
]
}
];
var myGent = new google.maps.LatLng(40.6946703,-73.9280182);
var Kine = new google.maps.LatLng(40.6946703,-73.9280182);
var mapOptions = {
zoom: 11,
mapTypeControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID,
scaleControl: false,
streetViewControl: false,
center: myGent
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var styledMapOptions = {
name: 'style_KINESB'
};
var image = 'images/resource/mapmarker.png';
var marker = new google.maps.Marker({
position: Kine,
map: map,
animation: google.maps.Animation.DROP,
title: 'B4318, Gumfreston SA70 8RA, United Kingdom',
icon: image
});
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);
The area I want to access through the Laravel blade. I want to make the coordinates dynamic.
var myGent = new google.maps.LatLng(40.6946703,-73.9280182);
var Kine = new google.maps.LatLng(40.6946703,-73.9280182);
contact.blade.php
#extends('layouts.frontend.master')
#section('title', 'Empathy - Become Volunteer')
#section('content')
#endsection
Please help me. Thank you very much for your help.

Answer 1

My solution here. I also worked. I'm waiting if you have better solutions.
Firstly. I am add #yield("javascript") directive in master.blade.php file. I add on to the js file.
#yield('javascript')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAz77U5XQuEME6TpftaMdX0bBelQxXRlM&callback=initMap" type="text/javascript"></script>
<script src="{{ asset('empathy/frontend/assets/js/googlemaps1.js') }}"></script>
<!-- Custom script for all page -->
<script src="{{ asset('empathy/frontend/assets/js/script.js') }}"></script>
Later edit contact.blade.php
#extends('layouts.frontend.master')
#section('title', 'Empathy - Become Volunteer')
#section('content')
#endsection
#section('javascript')
<script>
var x = JSON.parse('{!! json_encode($coordinate_array[0]) !!}');
var y = JSON.parse('{!! json_encode($coordinate_array[1]) !!}');
</script>
#endsection
ContactPageController.php
$contact = Contact::first();
$coordinate_array = explode(',', $contact->coordinates); // 40.6946703,-73.9280182
This way my solution worked.