Place markers from JSON data for Google MAPS API v3

Question

I have a MySQL DB that I have created a PHP script to pull that data into JSON format. I know need to take that JSON output and create markers on a Google Map. Seems simple but, I only need the markers to show if one of the values from the JSON output returns true. I will outline how the markers should display.

JSON Output

gpsStatus": "true", = Show streamOffline.png icon/marker

If gpsStatus & "streamStatus": "true", Then show the streamOnine.png icon/marker

If gpsStatus": "false" the show or remove from map the streamOffline.png icon/marker

So basically the only time a icon/maker should be shown is if gpsStatus": "true" but depending on the status of streamStatus determines if it shows streamOffline.png icon/marker or streamOnline.png icon/marker.gpsStatus": "false" removes or doesn't show a marker regardless of the streamStatus value.

Another twist is I am trying to have the markers to update/refresh without reloading the map based on that data from the lat/lng values from the JSON output. If am also trying to pull the other values from the JSON output so I can put the data in infowidows etc.

I have been searching for months on how to do this both on Stack, Google searches and YouTube and trying different things (too many things to list and post here) but, most of the examples ether don't apply to me or are outdated and I cannot get working for my needs. I am horrible when it comes to JavaScript and Google Maps.

So is there anyone who could give me an example based on my situation of how to take that JSON data and loop through it to plot dynamic markers on the map based on the value/s of some of the objects and refresh/update them when the lat/lng values change and then remove the marker when the "gpsStatus" shows false as well as know what keys to to use in other areas?

Here is my JSON output.

http://stream.dfwstormforce.com/test/api.php

Here is my test map with a static marker and what it should look like with populated data that I am trying to accomplish.

http://stream.dfwstormforce.com/test/test.html

Answer 1

I have tried to change the code by what i understood from above description, you may extend it now.

            var customIcons = {
                  offline: {
                    icon: 'http://stream.dfwstormforce.com/images/icons/gpsOffline.png'
                  },
                  online: {
                    icon: 'http://stream.dfwstormforce.com/images/icons/gpsOnline.png'
                  }
                };

            var getCustomIcons= function (streamdata){
                    var iconUrl=customIcons.online;
                      if(streamdata.gpsStatus=='false')
                      {
                        iconUrl=customIcons.offline.icon;
                      }else
                      {
                        iconUrl=customIcons.online.icon;
                      }
                      return iconUrl;
                }


               $.getJSON('http://stream.dfwstormforce.com/inc/api.php', function(responsedata) { 
                        $.each( responsedata.streamers, function(i, value) {
                             if(value.lat!="" && value.lng!="" )
                             {
                                  var marker = new google.maps.Marker({
                                      position: {lat: parseFloat(value.lat), lng: parseFloat(value.lng)},
                                      animation: google.maps.Animation.DROP,
                                      title: value.DisplayName+','+ value.ChaserLocation,
                                      icon: getCustomIcons(value),
                                      map: map
                                    });

                                  marker.addListener('click', function() {
                                          infowindow.open(map, marker);
                                        });
                            }
                         });
            });