Here is a complete working example of your page. In this simplified version, your JSON API http://stream.dfwstormforce.com/test/api.php will be loaded periodically every 10 seconds and qualified data will be displayed on the map ( gpsStatus = true ).
The marker icon displayed will depend on the value of streamStatus .
<!doctype html> <html> <head> <title>Google Map Test Page</title> <style> html, body, .map { width: 100%; height: 100%; background-color: #eee; } </style> </head> <body> <div id="map" class="map"></div> <script> var map = null; var markers = []; // Reload interval in milliseconds. var reloadInterval = 10000; var intervalId = window.setInterval(loadData, reloadInterval); function initMap() { var northTexasPosition = { lat: 32.836, lng: -96.995 }; map = new google.maps.Map(document.getElementById('map'), { center: northTexasPosition, zoom: 7, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_RIGHT }, }); loadData(); } // Load the markers data from API and display them on the map. function loadData() { $.getJSON('http://stream.dfwstormforce.com/test/api.php', function(responsedata) { clearMarkers(); $.each(responsedata.streamers, function (key, item) { item.lat = parseCoordinateNumber(item.lat); item.lng = parseCoordinateNumber(item.lng); item.gpsStatus = parseBoolean(item.gpsStatus); item.streamStatus = parseBoolean(item.streamStatus); if (shouldAddToMap(item)) { addToMap(item); } }); }); } // Clear all markers from the map. function clearMarkers() { $.each(markers, function (key, marker) { marker.setMap(null); }); markers = []; } // Add marker to the map. function addToMap(item) { var marker = new google.maps.Marker({ position: { lat: item.lat, lng: item.lng }, title: item.DisplayName + ', ' + item.ChaserLocation, icon: getIcon(item.streamStatus), map: map }); markers.push(marker); } // Get the appropiate image url for marker icon. function getIcon(streamStatus) { if (! streamStatus) { return 'http://stream.dfwstormforce.com/images/icons/streamOffline.png'; } return 'http://stream.dfwstormforce.com/images/icons/streamOnline.png'; } // Should we add the marker to the map? function shouldAddToMap(item) { if ($.type(item.lat) === 'null' || $.type(item.lng) === 'null') { return false; } return item.gpsStatus === true; } // Parse coordinate number like 'W96.38188' to appropiate decimal value: -96.38188 // return null if it invalid. function parseCoordinateNumber(val) { if ($.type(val) === 'number') { return parseFloat(val); } if ($.type('val') !== 'string') { return null; } val = val.trim(); if (val.length === 0) { return null; } var directionPart = val.substr(0, 1).toUpperCase(); var valuePart = parseFloat(val.substring(1)); if ($.inArray(directionPart, ['N', 'E']) >= 0) { return isNaN(valuePart) ? null : valuePart; } if ($.inArray(directionPart, ['S', 'W']) >= 0) { return isNaN(valuePart) ? null : -valuePart; } val = parseFloat(val); return isNaN(val) ? null : val; } // Parse boolean value. function parseBoolean(val) { if ($.type(val) === 'boolean') { return val; } if (val === 1) { return true; } if (val === 0) { return false; } if ($.type('val') !== 'string') { return null; } val = val.trim().toUpperCase(); if (val === 'TRUE') { return true; } if (val === 'FALSE') { return false; } return null; } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async="defer"></script> </body> </html>
As @Dawood Awan pointed out, the main problem is that your lat and lng data use the degree direction (N, S, E, W). You must analyze this data in the appropriate coordinate value in decimal format. Here is the part of my code above that will parse lat and lng :
function parseCoordinateNumber(val) { if ($.type(val) === 'number') { return parseFloat(val); } if ($.type('val') !== 'string') { return null; } val = val.trim(); if (val.length === 0) { return null; } var directionPart = val.substr(0, 1).toUpperCase(); var valuePart = parseFloat(val.substring(1)); if ($.inArray(directionPart, ['N', 'E']) >= 0) { return isNaN(valuePart) ? null : valuePart; } if ($.inArray(directionPart, ['S', 'W']) >= 0) { return isNaN(valuePart) ? null : -valuePart; } val = parseFloat(val); return isNaN(val) ? null : val; }
This will allow the coordinate value in a number or line with a direction (N, S, E or W). I have not dealt with the correct range of latitude or longitude, but you can also add this. The function will return null if this coordinate is not valid.
Also, be sure to replace the Google Maps API with yours:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async="defer"></script>
Hope this helps you!