CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Texan78
Texan78

Reputation: 687

Refreshing KML data in Google Maps V3

I have a map that I have ported from V2 to V3 and I am trying to update the code to refresh the KML data at a set time. In this case every 30 secs. It is just suppose to update the data on the map and show the countdown for when the next update happens.

Here is a working version of how it is suppose to work in V2.

V2 EXAMPLE

Here is the relevant code in the V3 script I have updated but it is not working. I am not getting any errors so I am not sure what I am doing wrong. This is working on V2 but I can't get it to work with V3. What am I missing and overlooking?

//This calls genkml.php on every refresh cycle to generate a new kml file
function UpdateKML() {
    //document.getElementById('TheDiv').innerHTML = '0';
    var xmlhttp=false;
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        try {
            xmlhttp = new XMLHttpRequest();
        } catch (e) {
            xmlhttp=false;
        }
    }
    if (!xmlhttp && window.createRequest) {
        try {
            xmlhttp = window.createRequest();
        } catch (e) {
            xmlhttp=false;
        }
    }
    xmlhttp.open("GET", "genkml.php?force=" + force + "&ofd=" + KMLdate + "&nsd=" + NSdate + "&dbg=" + dbg + "&rand="+(new Date()).valueOf(),true);
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {
            var resp = xmlhttp.responseText;
            //if (resp === undefined) resp = '';        // If we get a bad response, just set resp to nothing
            if (dbg == 'y') {                           // Check if we want debug info
                var tmpresp = resp;
                if (tmpresp === undefined) tmpresp  = ' ';
                if (document.getElementById('div1') == null) {  // Check if debug div exists, if not add it to end of body
                    var divTag = document.createElement("div");
                    divTag.id = "div1";
                    divTag.innerHTML = 'Response Status: ' + xmlhttp.status + '<br />' + tmpresp;
                    document.body.appendChild(divTag);
                } else {                                        // Otherwise just update the info
                    document.getElementById('div1').innerHTML = 'Response Status: ' + xmlhttp.status + '<br />' + tmpresp;
                }
            } else {                                // Else check if debug div exists and remove it (will take an update to remove
                if (document.getElementById('div1') != null) document.body.removeChild(document.getElementById("div1"));
            }
            if (resp !== undefined) {   // Make sure we got data
                KMLdate = resp.split("|")[0].split("~")[0];
                NSdate = resp.split("|")[0].split("~")[1];
                updateHTML(resp);       // This calls the updateHTML function if there is info returned
            }
        }
    }
    xmlhttp.send(null);
    // add back overlays
    nyLayer = new google.maps.KmlLayer(null);
    nyLayer.setMap(null);               // Remove overlays
    var nyLayer = new google.maps.KmlLayer(URLToKML + "?rand="+(new Date()).valueOf(),
                  {
                      suppressInfoWindows: false,
                      map: map,
                      preserveViewport: true,
                      zIndex: 999
                  });

// Time overlayed on map - could be in updateHTML() to just show when .kml read last
    var time = CurrentTime ("B", "12a", true, TZOffset)
    document.getElementById('currenttime').innerHTML = time;

}

function CurrentTime (type, hours, secs, ofs) {
/*
type (char)           hours (char)      secs (bool)     ofs (num)
"U"-UTC               "24"=24 hr time   true=hh:mm:ss   0=hours from UTC
"B"-User's Browser    "12"=12 hr time   false=hh:mm
"S"-Web Site          "12a"=am/pm
*/
    if (type  == null){ type  = "B"; }     // These are the defaults
    if (hours == null){ hours = "12a"; }
    if (secs  == null){ secs  = true; }
    if (ofs   == null){ ofs   = 0; }
    var currentHour = 0;
    var currentMinute = 0;
    var currentSecond = 0;
    var time = 0;
    var currentDate = new Date();

    if (type == "U") {
        currentHour = currentDate.getUTCHours();                      // UTC
    } else if (type == "B") {
        currentHour = currentDate.getHours();                         // Viewer's time
    } else {
        currentHour = currentDate.getUTCHours() + ofs;                // your local time
        if(currentHour < 0) { currentHour = currentHour + 24;}
    }

    currentMinute = currentDate.getMinutes();
    currentMinute = (currentMinute < 10 ? "0" : "") + currentMinute;

    if (hours == "24") {
        if(currentHour == 24) { currentHour = 0 };                                 // use if wanting 24 hour time
        currentHour = (currentHour < 10 ? "0" : "") + currentHour;
    } else if (hours == "12") {
        if(currentHour == 0) currentHour = 12;
        currentHour = (currentHour < 10 ? "0" : "") + currentHour;
    } else {
        if(currentHour == 0) currentHour = 12;                                    // else no leading zero for am/pm
    }

    time = currentHour + ":" + currentMinute;

    if (secs) {
        currentSecond = currentDate.getSeconds();
        currentSecond = (currentSecond < 10 ? "0" : "") + currentSecond;
        time = time + ":" + currentSecond;
    }

    if (hours == "12a") {
        time = time + " " + (currentHour > 12 ? "PM" : "AM");
    }

    return time;
}

//This function is only used if you leave the debug checkbox below
//  You can remove this function and the checkbox and set the debug
//  mode using the dbg=y query parameter
function debug(obj){
    if (obj.checked) {
        dbg='y';
    } else {
        dbg='n';
        if (document.getElementById('div1') != null) document.body.removeChild(document.getElementById("div1"));
        //document.getElementById('TheDiv').innerHTML = '';
    }
}
//This function is only used if you leave the Force Update checkbox below
//  You can remove this function and the checkbox and set the force
//  mode using the force=y query parameter
function forceupdate(obj){
    if (obj.checked) {
        force='y';
    } else {
        force='n';
    }
}
//This function parses out the query parameter value
function gup( name ){
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regexS = "[\\?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( window.location.href );
    if( results == null )
        return "";
    else
        return results[1];
}

Here is a link to the full .js map code for V3 if anyone needs to see it.

V3 NSGAMP CODE

V3 FULL PAGE

EDIT: I think it has to do with this snippet of code that is suppose to remove then add the updated KML data to the map.

This was in V2 which is depreciated now. 

// add back overlays
    map.removeOverlay(geoXml);              //Remove overlays
    geoXml = new GGeoXml(URLToKML + "?rand="+(new Date()).valueOf() );      //rand is used to trick google maps into thinking this is a new KML (don't use cache version)
    map.addOverlay(geoXml);                 //Add the new data from the newly generated KML

Code I updated for V3 replacing the above depreciated V2 snippet which was found by searching. Not sure if this is correct but it was all I could find. 

// add back overlays
    nyLayer = new google.maps.KmlLayer(null);
    nyLayer.setMap(null);               // Remove overlays

    function refresh(layer) {

    var nyLayer = new google.maps.KmlLayer(URLToKML + "?rand="+(new Date()).valueOf(),
                  {
                      suppressInfoWindows: false,
                      map: map,
                      preserveViewport: true,
                      zIndex: 999
                  });

               }

Upvotes: 2

Views: 3508

Answers (2)

MistyDawn
MistyDawn

Reputation: 903

Or you can simplify it even further and use:

window.nyLayer.url = URLToKML + '&ver=' + Date.now();

Upvotes: 1

Texan78
Texan78

Reputation: 687

I got it sorted and working and I knew it was a simple edit but I was having a really difficult time finding a solution. If anyone else this could help this is what I did.

Changed this in the V2 version. 

updateHTML(resp);       //This calls the updateHTML function if there is info returned
        }
    }
}
xmlhttp.send(null);
// add back overlays
map.removeOverlay(geoXml);              //Remove overlays
geoXml = new GGeoXml(URLToKML + "?rand="+(new Date()).valueOf() );      //rand is used to trick google maps into thinking this is a new KML (don't use cache version)
map.addOverlay(geoXml);                 //Add the new data from the newly generated KML

To this in the V3 version.

updateHTML(resp);       // This calls the updateHTML function if there is info returned
            }
            //remove layer
            window.nyLayer.setMap(null);
            //change its url so that we would force the google to refetch data
            window.nyLayer.url = URLToKML + "?rand="+(new Date()).valueOf();
            //and re-add layer
            window.nyLayer.setMap(window.map);
        }
    }
    xmlhttp.send(null);

The map.removeOverlay and map.addOverlay is depreciated in V3 so it took me while to find the replacement.

Upvotes: 1

Related Questions