greetings campers and leaders,
I am seeking advice regarding the following error when trying to pull lat long info from mysql database in order to display the markers on the map:
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: not an Object
I believe this error means that the position key needs a value to be an object of some format, and its not happy with the format of the thing im passing it.
Steps I took to try to fix it:
I saw that latlng I was passing had () around it, so I used str_replace() to change that to {} I also saw that that what I was passing was missing the lat: and lng: so I added those as well, still not working…
I read this post on stackedoverflow and someone said to try to add in the parsefloat method, perhaps the numbers are not being interpreted as integers, but rather as strings… I did that, but its still not working.
If I hard code the values in , it seems to be working fine though.
All help appreciated.
Here is what Im seeing in my console:
console errors
<?php
$stmt = $db->query('SELECT * FROM tbl_buildings');
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
//print_r($results);
echo '<br/><br/>';
foreach($results as $row) {
//echo $row['name'].' '.$row['address']; //etc...
$latlong = str_replace('(', '{lat:parseFloat(' , $row['latlong']); //replace "(" with "{". "(lat,long)" will be "{lat,long)"
echo $latlong."<br><br>";
$latlong = str_replace(',','),lng:parseFloat(' , $latlong); //replace "," with ",lng:". "{lat: lat,lng:long)" will be "{lat,long}"
echo $latlong."<br><br>";
$pattern= '/\)$/';
$replacement= ')}';
$latlong= preg_replace($pattern, $replacement, $latlong);
//$latlong = str_replace(')','}' , $latlong); //replace ")" with "}". "{lat: lat,lng: long)" will be "{lat: lat,lng:}"
echo $latlong."<br><br>";
$locations[] = array('name'=>$row['name'], 'latlong'=>$latlong);
}
/* Convert data to json */
$markers = json_encode($locations);
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 42.028150, lng: -87.719700},
zoom: 13,
mapTypeId: 'roadmap'
});
<?php echo "var markers=$markers;\n"; ?>
console.log('these are the markers '+markers);
//var j=JSON.parse(markers);
for( var x in markers ){
name = markers[x].name;
latlong=markers[x].latlong;
console.log('this is latlong under for var x in markers: '+latlong)
marker = new google.maps.Marker({
position: latlong,
name:name,
map: map
});
//etc...