Change an icon using an 'if' statement in Google Maps

Question

I'm writing a program for the oil and gas industry that allows you to see whether a pump-jack is on or off using a remote logic board at the site, which then relays the information via 4G internet. I'm trying to build it in a way that an icon on the map will be red or green depending of whether the alarm on the board is tripped. the file path for the alarm can be reached via static IP like for example:

http://111.111.111.111/var/rmsdata/alarm1

this file path either gives a value of 1 or 0

how do i translate that value of 0 or 1 into an if statement that would change the icon depending on the value?

Here is my code for one of the icons:

 function initialize() {


        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(50.242913, -111.195383),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.TERRAIN


        } 
        var map = new google.maps.Map(map_canvas, map_options);

        var point       =       new google.maps.LatLng(47.5, -100); 
        var derrick1    =       new google.maps.Marker ({
            position: new google.maps.LatLng(50.244915, -111.198540),    
            map: map,
            icon: 'on.png',
            size: new google.maps.Size(20, 32),
            title: '1' 

        })



        google.maps.event.addDomListener(window, 'load', initialize);

score 1 · Accepted Answer · answered Sep 30 '16 at 08:02

I'm doing a simple Ajax request for the given url and base the icon on the response. This code isn't tested and I could improve it a lot. But it could hopefully point you to the right direction.

function initialize() {
    var url = 'http://111.111.111.111/var/rmsdata/alarm1';
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
        center: new google.maps.LatLng(50.242913, -111.195383),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(map_canvas, map_options);

    // Make an ajax request for the url that you specified above and base your icon on the response.
    $.get(url, function(response) {
        var on = true;

        if (isNaN(response)) {
            // If the response would contain anything else but a number.
            console.log('Response is not a number, defaults to "on"');
        } else {
            // Converts the "0" to "false" and anything else to "true".
            on = !!+response;
        }

        var point = new google.maps.LatLng(47.5, -100);
        var derrick1 = new google.maps.Marker({
            position: new google.maps.LatLng(50.244915, -111.198540),
            map: map,
            icon: (on) ? 'on.png' : 'off.png', // Shorthand if-statement to determine the icon. Also called Ternary Operator.
            size: new google.maps.Size(20, 32),
            title: '1'

        })
    });

    google.maps.event.addDomListener(window, 'load', initialize);
}

Change an icon using an 'if' statement in Google Maps

1 Answers1