Struggling to find a solution for this issue, but it seems like it should be simple enough. Initially, I fetch my JSON data using the code snippet below:
testApp.controller("cat0Controller", function($scope, $http){
var url = "../../../Data/JSONs/randomdata_cat0.json";
$http.get(url).then(function(response){
$scope.dataset = response.data;
$scope.hi = response.status;
});
});
Successfully displaying the JSON data in an HTML table using ng-repeat.
The structure of the JSON data is as follows:
[
{
"Lat": 16.374,
"Long": 48.212,
"Timestamp": "2017-01-07 / 13:31:56",
"Downstream": 20.79852450876752,
"Upstream": 20.87613636972708,
"Category": 5
},
Now the goal is to extract the Latitude and Longitude values from the JSON and place Google Maps markers at those positions with onClick text showing Upstream, Downstream, and timestamp.
Below is my current HTML and Google Maps implementation:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="../js/speedtestTestController.js"></script>
<style type="text/css">
html { height: 50% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 40%; width: 40%; }
</style>
<script type="text/javascript">
// Google Maps initialization functions
</script>
</head>
<body ng-app="testApp" >
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
If you have any insights on how to dynamically generate these markers from the JSON data, your help would be greatly appreciated!
Thank you!