I've looked up other examples of this question on Stack, but they either use JQUERY or load using XML etc, which is NOT what I'm using to populate my Map.
Map works perfectly fine, but marker doesn't work when I attempt to reference a PHP variable as LatLng. I've tried to echo the LatLng Variable and use Heredocs but nothing works.
<? php
// I MADE QUERIES HERE AND ADDED THEM INTO "$coords"
echo<<<_
<!DOCTYPE html>
<html>
</style>
<body>
<div class="Banner">
<div class="TitleText">Sonic Strains ©</div>
</div>
<div class="login">Logout</div>
<div class="gallery" id="container">
<div class="map" id="mapInsert"></div>
<div class="navButton">Start Nav</div><div class="orderButton">Order Details</div>
<div class="abortButton">Abort</div><div class="confirmButton">Confirm</div><div class="disclaimer"></div>
</div>
<script>
function initMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var Map = new google.maps.Map(document.getElementById('mapInsert'));
Map.setCenter(initialLocation);
Map.setZoom(8);
}, function(positionError) {
//---------- User denied geolocation prompt - default to Chicago
Map.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
Map.setZoom(5);
},{enableHighAccuracy:true, timeout: 3000, maximumAge:1000});}
//MAKE ANOTHER MARKER FOR THE CLIENT LOCATION
var userLocation = {lat:$coords[user_lat], lng:$coords[user_long]};
var marker = new google.maps.Marker({
position:userLocation,
map:Map,
draggable:false,
clickable:false
});
marker.setMap(Map);}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&callback=initMap"
async defer></script>
</body>
</html>
_;
?>
Error--
"SyntaxError: Unexpected token <"
This is where I try an reference the PHP LatLng Marker Position, why doesn't it allow me to reference PHP?