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

Error in Browserify Express App: Unexpected token while parsing the file

I have been attempting to browserify a javascript file. When I run the command: browserify global.js -o bundle.js An error message is returned: Error: Parsing file C:\ocquiz\public\javascripts\global.js: Unexpected token (756 ...

The process of masking a video with alpha data from another video on canvas seems to be experiencing a

I have a unique setup on my page where I'm masking one video with another. Essentially, when the Play button is pressed, a second video slowly appears over the looping video in the background. This effect is achieved by using a black/white mask transf ...

When PHP is connected to the database, Ajax remains inactive and does not perform any tasks

I am currently working on setting up a simple connection between JavaScript and my database using ajax and PHP. The goal is for JavaScript to receive a name from an HTML form, make changes to it, send it to PHP to check if the name already exists in the da ...

Unable to sign up for WordPress function

I'm having trouble getting my function registered properly in WordPress, no matter how many times I try. So far, here's what I've done: Inserted code into themes functions.php function test_my_script() { wp_register_script( 'custom-s ...

Accessing data from arrays asynchronously using JavaScript

Update I have included actual code below, in addition to the concept provided earlier. Here is the async array access structure I am trying to implement: for (p = 0; p < myList.length ; p++){ for (k = 0; k < RequestList.length; k++){ i ...

Converting dates to time in amCharts v3: A step-by-step guide

I am looking to exclusively show "6 AM" on my X AXIS, rather than displaying 2019-09-05 06:00:00 Please refer to my code sample at https://jsfiddle.net/uwtz3p4h/ Is it feasible to only display the time? I have searched through their documentation but co ...

The React Query devtools are failing to display

I am currently working on a project using React Query, but for some reason, the DevTools icon is not appearing on my screen. I have checked the console for errors, but there are none. I am following a tutorial on YouTube to help me with this. Here is a sn ...

image source that changes dynamically with a placeholder image

Currently, I am facing a certain issue. Unfortunately, I cannot provide a plunkr example as the image is sourced from a protected site and there are no open URLs available that constantly serve changing images. Additionally, I am unable to use a local anim ...

Using a JavaScript command, connect a function from one file to another file

I attempted to import a function because I want to click on <il> servies</il> and scroll to the services section on the home page. However, I simply want to click on the li element in the navbar and scroll to the service section on the home pag ...

Navigating through a multidimensional array in Angular 2 / TypeScript, moving both upwards and downwards

[ {id: 1, name: "test 1", children: [ {id: 2, name: "test 1-sub", children: []} ] }] Imagine a scenario where you have a JSON array structured like the example above, with each element potenti ...

When using Vue.js, the v-bind:class directive can be applied when an array is present and contains a specific

In my current project with Laravel and Vue.js, I am dealing with the task of creating multiple users. To accomplish this, I am constructing an array of users and populating all the necessary fields in order to store them in a database table. Once all field ...

combine object with an array attribute

If we have the following objects: let firstObject = {items: ["apple"]}; let secondObject = {items: ["orange"]}; and then execute Object.assign(firstObject, secondObject); the new state will be: firstObject.items[0] //"orange" firstObject.items === sec ...

Struggling to retrieve scope data within directive from controller in AngularJS

As a newcomer to AngularJS, I have utilized a service to retrieve data from the backend and received it in the controller. Now, my task is to parse these values and dynamically generate elements in a directive. However, when attempting to do so, I am encou ...

Error Encountered with Next.js 13.4.1 when using styled-components Button in React Server-Side Rendering

I am currently working on a React project using Next.js version 13.4.1 and styled-components. One problem I'm facing is with a custom Button component that I've created: import React from 'react'; import styled from 'styled-compone ...

Using jQuery to refresh a div element

I am struggling with updating the "right" div in my jsp page using the script below. Despite being contained in a single file, the update does not seem to work. Any assistance is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

The AngularJS 2 application reports that the this.router object has not been defined

My function to sign up a user and redirect them to the main page is implemented like this: onSubmit(){ this.userService.createUser(this.user).subscribe(function (response) { alert('Registration successful'); localStor ...

I have a task of extracting information from a live Google map and generating a static Google map using API V3

I am working on a project that involves allowing users to create maps using Google Maps and then save the image. My current workaround uses both the Google Maps API V3 and the Static Maps API. The user can interact with the dynamic Google map by scrolling ...

Navigating a Frame and Clicking a Link with Puppeteer: A Step-by-Step Guide

I am facing an issue with clicking on an anchor link within a page that is supposed to open a new tab for exporting a PDF. The problem arises because this link is located inside a frame within a frameset structure as shown below: https://i.stack.imgur.com ...

Can date ranges be utilized as separate date items on the time scale in D3.js?

I have a chart that resembles the one shown below, however, there is a crucial component missing. Currently, my time scale follows the standard format as depicted in the first picture. I am looking to convert it to the time scale seen in the second picture ...

What does {``} denote in react-native programming?

During my participation in a collaborative project, I noticed that there is a significant amount of {' '} being used. For instance: <Text> {' '} {constant.Messages.PointText.hey} {this._user.first_name || this._user ...