Converting .JSON list to google maps - php

Question

Hi I have a aircraft json list on a pi connected to a home network that I would like to convert to a google maps format similar to flightradar24.com etc. I have tried multiple ways but have not got very far. Any help would be good I am only a beginner with coding so excuse the not so good explanation. Thanks :)
{ "now" : 1497814126.3,
"messages" : 20531195,
"aircraft" : [
{"hex":"c82089","squawk":"5625","flight":"ANZ519 ","altitude":3250,"vert_rate":3008,"track":79,"speed":225,"messages":88,"seen":69.0,"rssi":-24.9},
{"hex":"c81881","squawk":"0262","flight":"ANZ101 ","lat":-36.881150,"lon":174.829440,"nucp":7,"seen_pos":0.3,"altitude":9725,"vert_rate":3136,"track":269,"speed":330,"messages":1360,"seen":0.1,"rssi":-8.1},
{"hex":"aae597","squawk":"0767","flight":"AAL83 ","lat":-36.149918,"lon":175.464592,"nucp":7,"seen_pos":0.4,"altitude":23400,"vert_rate":-1792,"track":212,"speed":386,"messages":1734,"seen":0.1,"rssi":-24.8},
{"hex":"c81dd5","squawk":"0256","flight":"QFA140 ","lat":-36.892043,"lon":174.183456,"nucp":7,"seen_pos":0.0,"altitude":21800,"vert_rate":2240,"track":270,"speed":398,"messages":4023,"seen":0.0,"rssi":-27.1},
{"hex":"c8178c","squawk":"0260","flight":"ANZ937 ","lat":-36.605002,"lon":173.758772,"nucp":6,"seen_pos":52.9,"altitude":26675,"vert_rate":1152,"track":295,"speed":412,"messages":4913,"seen":1.4,"rssi":-32.3}
]
}

Answer 1

Here is a demo that shows how to view latitude/longitude data as markers on a map
var data = [{
"hex": "c82089",
"squawk": "5625",
"flight": "ANZ519 ",
"altitude": 3250,
"vert_rate": 3008,
"track": 79,
"speed": 225,
"messages": 88,
"seen": 69.0,
"rssi": -24.9
},
{
"hex": "c81881",
"squawk": "0262",
"flight": "ANZ101 ",
"lat": -36.881150,
"lon": 174.829440,
"nucp": 7,
"seen_pos": 0.3,
"altitude": 9725,
"vert_rate": 3136,
"track": 269,
"speed": 330,
"messages": 1360,
"seen": 0.1,
"rssi": -8.1
},
{
"hex": "aae597",
"squawk": "0767",
"flight": "AAL83 ",
"lat": -36.149918,
"lon": 175.464592,
"nucp": 7,
"seen_pos": 0.4,
"altitude": 23400,
"vert_rate": -1792,
"track": 212,
"speed": 386,
"messages": 1734,
"seen": 0.1,
"rssi": -24.8
},
{
"hex": "c81dd5",
"squawk": "0256",
"flight": "QFA140 ",
"lat": -36.892043,
"lon": 174.183456,
"nucp": 7,
"seen_pos": 0.0,
"altitude": 21800,
"vert_rate": 2240,
"track": 270,
"speed": 398,
"messages": 4023,
"seen": 0.0,
"rssi": -27.1
},
{
"hex": "c8178c",
"squawk": "0260",
"flight": "ANZ937 ",
"lat": -36.605002,
"lon": 173.758772,
"nucp": 6,
"seen_pos": 52.9,
"altitude": 26675,
"vert_rate": 1152,
"track": 295,
"speed": 412,
"messages": 4913,
"seen": 1.4,
"rssi": -32.3
}
];
function initMap() {
var myLatLng = {
lat: -36.363,
lng: 175.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: myLatLng
});
for (var i = 0; i < data.length; i++) {
var flight = data[i],
latLng = new google.maps.LatLng(flight.lat, flight.lon);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.flight
});
}
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIPPUQ0PSWMjTsgvIWRRcJv3LGfRzGmnA&callback=initMap">
</script>
<div id="map"></div>