Question

I am able to clear the polygons after 5 seconds passes once the tiles are loaded on the map, but when I try to build the polygons again the polygons are being generated by the original data. I would like to use the new data set.

What am I doing wrong?

Sorry for so many questions. I am having lots of fun learning the API.

Thank you in advance.

    var map;

    function initialize() { 
        var kansas_city = new google.maps.LatLng(39.316858,-94.963194);
        var mapOptions = {
        zoom: 13,
        center: kansas_city,
        mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        google.maps.event.addListener(map, 'tilesloaded', function() {
            setTimeout(function() { removeSectors() }, 3000);
            setTimeout(function() { updateMap() }, 4000);
            });     
    }

    function removeSectors() {
        if ( allPolygons ) {
            for ( i = 0; i < allPolygons.length; i++ ) {
                allPolygons[i].setMap(null);
            }
        allPolygons.length = 0;
        }
    }

    var data;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'json_template.json', true);
    xhr.onload = function() {
        data = JSON.parse(xhr.responseText)
        sector_callback(data);
    };
    xhr.send();

    function updateMap() {
        var data;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'json_template1.json', true);
        xhr.onload = function() {
            data = JSON.parse(xhr.responseText)
            sector_callback(data);
        };
        xhr.send();
    }

    function createClickablePoly(poly, html) {
    google.maps.event.addListener(poly, 'click', function(evt) {
        infowindow.setContent(html);
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
        });
    }
    var infowindow = new google.maps.InfoWindow({});        

    function sector_callback() {
        var bounds = new google.maps.LatLngBounds();        
        for (var i = 0, len = data.features.length; i < len; i++) {
            var coords = data.features[i].geometry.coordinates[0];
            siteNames = data.features[i].properties.Name; // added for site names
            var path = [];
        for ( var j = 0, len2 = coords.length; j < len2; j++ ){ // pull out each     set of coords and create a map object
            var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
            bounds.extend(pt);
            path.push(pt);

        }

        var polygons = new google.maps.Polygon({
        path: path,
            strokeColor: "#000000",
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#000000",
            fillOpacity: 0.35,
        map: map
        });
        createClickablePoly(polygons, siteNames);
        //console.debug(siteNames);

        google.maps.event.addListener(polygons, 'mouseover', function() {
        var currentPolygon = this;

        currentPolygon.setOptions({ 
            fillOpacity: 0.45,
            fillColor: "#FF0000"
            })
        });

        google.maps.event.addListener(polygons, 'mouseout', function() {
        var currentPolygon = this;
        currentPolygon.setOptions({ 
            fillOpacity: 0.35,
            fillColor: "#000000"
            })
        });

        allPolygons.push(polygons);
        }


    }
    var allPolygons = [];

Answer 1

Move the tilesloaded event into the initialize function. As it sits, you’re going to adding as many listeners as you have polygons and they will all be trying to clear/update the map.