Note that there are some explanatory texts on larger screens.

plurals
  1. PObuilding polygons after removing them from the map
    text
    copied!<p>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.</p> <p>What am I doing wrong?</p> <p>Sorry for so many questions. I am having lots of fun learning the API.</p> <p>Thank you in advance.</p> <pre><code> 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 &lt; 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 &lt; 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 &lt; 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 = []; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload