Updating the KML data on Google Maps V3 for a fresh look

I recently updated a map from V2 to V3 and I am working on incorporating code to automatically refresh the KML data every 30 seconds. The goal is to update the map with the latest data and display a countdown until the next refresh.

Here is an example of how it worked in V2: V2 EXAMPLE

I have made updates to the relevant code in V3 but unfortunately, it's not functioning as expected. Despite not encountering any errors, the code that worked perfectly in V2 isn't cooperating in V3. I'm struggling to pinpoint what I may be overlooking. What could be missing or causing this discrepancy between V2 and V3?

//This calls genkml.php on every refresh cycle to generate a new kml file
function UpdateKML() {
    // Code for updating KML
}

// Function for displaying current time based on different parameters
function CurrentTime (type, hours, secs, ofs) {
    // Code for determining current time based on type
}

// Function for setting debug mode
function debug(obj){
    // Code for toggling debug mode
}

// Function for enabling forced update
function forceupdate(obj){
    // Code for forcing update
}

// Function for retrieving query parameter value
function gup( name ){
    // Code for parsing out query parameter value
}

If needed, here is the link to the full .js map code for V3: V3 NSGAMP CODE

For reference, here are links to the full page and related snippets of code:

  • V3 FULL PAGE
  • EDIT: Excerpt of code for updating KML data in V2
  • Depreciated V2 Code Snippet
  • Updated V3 Code Snippet:
  • Refreshed V3 Code

Deprecated V2 Code Snippet:

// Deprecated code snippet for updating overlays in V2
    map.removeOverlay(geoXml);
    geoXml = new GGeoXml(URLToKML + "?rand="+(new Date()).valueOf());
    map.addOverlay(geoXml);

Updated V3 Code Snippet:

// Updated code snippet for refreshing KML data in V3
    nyLayer = new google.maps.KmlLayer(null);
    nyLayer.setMap(null);

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

Answer №1

After much perseverance, I finally managed to resolve the issue and get everything up and running smoothly. It turned out that the solution was a simple edit, but it took me quite some time to figure it out. In case anyone else is struggling with a similar issue, here's what worked for me.

The following changes were made 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

In the V3 version, the code was updated as follows:

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);

It took me a while to discover that map.removeOverlay and map.addOverlay are deprecated in V3, which caused some confusion before finding the appropriate replacements.

Answer №2

Another way to streamline this process is by utilizing the following code:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Axios mistakenly includes an additional trailing slash in body parameters

Currently, in the process of developing an application utilizing React Native, I am faced with the challenge of communicating with an IoT chip that possesses minimal RAM memory. Due to this constraint, all logic must be executed on the client side. One sp ...

Use jQuery's .replaceWith method only once for each instance

Encountering a problem with my code that involves jQuery, and I'm struggling to find a solution. $("a[href=##]").replaceWith("<label>" + $("a[href=##]").text() + "</label>"); The issue arises when I have multiple links with the same href ...

Error occurred: Unable to access 'client' property as it is undefined. Process will continue running

Hi there! I'm currently working on building a key bot for my website, but I keep encountering this error UNCAUGHT EXCEPTION - keeping process alive: TypeError: Cannot read properties of undefined (reading 'client') along with another one rel ...

Troubleshooting problem with sorting in Angular 4 material header

Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. It displays "Sorted by ascending order" here. The ngx modal theme ...

Create JSX code for rendering components outside of the main component

As someone who is diving into the world of React, I am currently on lecture 23 out of 247 on Udemy where I am learning about states and events. However, one particular question has been lingering in my mind without a definitive answer. Our company has mad ...

Enhancing the user experience of the dropdown component through improved

I have developed an accessibility feature for a dropdown component that dynamically populates values in the options menu only when the dropdown is opened. This means that it compiles the template on the fly and attaches it to the dropdown box. Dropdown HT ...

How is it possible for TypeScript to enable the importing of dependencies that it ultimately cannot utilize during runtime?

Take a look at my sample project by following this link: https://github.com/DanKaplanSES/typescript-stub-examples/tree/JavaScript-import-invalid I have developed a file named main.ts: import uuid from "uuid"; console.log(uuid.v4()); While type ...

VueJS computed property not updating correctly

My web application, built with Laravel / Vue JS, includes a google map component and a Vuetify data-table component. The Vue instance also features a computed property that calculates points for the Google Map based on another computed property from the Vu ...

The ajax POST method fails to trigger in a Node.js environment

Having an issue with the POST request. It's necessary for updating info without page reload. Below is my pug code: .tinder--buttons form(id="form1") button#love(type="submit") i.fa.fa ...

What is the most effective way to compare two arrays of objects in JavaScript?

I'm working on a function that needs to return an array of elements based on certain filters. Here is the code for the function: filter_getCustomFilterItems(filterNameToSearch: string, appliedFilters: Array<any>) { let tempFilterArray = []; ...

Discovering the Cookie in Angular 2 after it's Been Created

My setup includes two Components and one Service: Components: 1: LoginComponent 2: HeaderComponent (Shared) Service: 1: authentication.service Within the LoginComponent, I utilize the authentication.service for authentication. Upon successful authent ...

What are the steps to integrating JavaScript autocomplete into a website?

I am relatively new to the world of programming, particularly when it comes to JavaScript/jQuery. I have been searching online for a solution to enable autocomplete in my search feature, but despite trying various approaches found on the internet, I have y ...

Is it possible to alter the state of one page by clicking a link on another page?

Is it possible to update the state of a different page when a link is clicked and the user navigates to that page? For example: Homepage <Link href="/about"> <button>Click here for the About page</button> </Link> If a ...

Differentiate among comparable values through placement regex

I'm currently tackling a challenge involving regex as I work on breaking down shorthand CSS code for the font property. Here is my progress thus far: var style = decl.val.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); style = style ? style ...

Clicking on the prop in a React class component

This is the situation I am facing <List> {mainTags.map((mainTagItem) => { return ( <ListItem onClick={() => { setMainTag(mainTagItem.tag.tagId) }} button className={classes.mainTagItem}> <div className={classes. ...

Error encountered: EPERM when attempting to rename a directory in Node.js unexpectedly

There is a requirement for me to remove the Backup folder, rename the processor as Backup, create a Processor folder again, and send a response to the user. The code I am using for this task is as follows: fsExtra.remove('app/Backup', function(e ...

The bootstrap datepicker does not display the date range on the calendar

I tried to incorporate a bootstrap datepicker date-range in the code snippet below, but I am encountering an issue where the selected date range is not displaying on the calendar. <!DOCTYPE html> <html> <head> <link rel="stylesheet" ...

Using a promise instead of resolving it with Angular's $q.then() methodology

Imagine you come across the given code snippet: var callNo1 = $http(...).then(function (response1) { var callNo2 = $http(...).then(function (response2) { return [response1.data, response2.data]; }); return callNo2; }).then(function (r ...

Exploring the potential of Angular JS and gapi in building a seamless routed

I'm facing a similar challenge as described in this question. However, the key difference is that I require two controllers for two distinct routes, essentially representing two different tables: ../table1 and ../table2. Each table needs to fetch data ...

Is it possible to stack one Canvas on top of another?

Right now, I am engaged in a process that involves: creating a canvas and attaching it to a division applying a background image through CSS to that canvas. drawing a hex grid on the canvas placing PNGs on the canvas. animating those PNGs to show "movem ...