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?
The issue was that the marker declaration was outside of the initMap(). When I moved the marker inside of the Main Function it worked
The problem are the opening tag. You're using an invalid tag:
<? php
(note the blank between question and PHP keyword).
You need to change it to a correct opening PHP tag, as:
<?php
Also, on the code, you need to echo the vars, because you're not doing anything with it.
var userLocation = {lat:<?php echo $coords[user_lat]; ?>, lng: <?php echo $coords[user_long]; ?>};
((EDIT))
Ok, doing a new revision to the code, I can see at least one problem:
You're creating a POI with this syntax:
var userLocation = {lat:$coords[user_lat], lng:$coords[user_long]};
var marker = new google.maps.Marker({
position:userLocation,
map:Map,
draggable:false,
clickable:false
});
Checking on my own code, there's a functional poi adding code:
newmarker = new google.maps.Marker({
map: map,
key: marker[0],
name: marker[1],
lat: marker[3],
lon: marker[4],
content: marker[9],
position: new google.maps.LatLng(marker[3], marker[4]),
icon: icon
});
Probably, lot of the code (key, name, etc) are optional values, but, you're adding an array to position value, and not a LatLng value.
If that code doesn't work, please check your HTML code directly (not on PHP), because you can have something strange on the code blocking the loading process (For example, php is not filling the values correctly).