He's dead, Jim: is there a memory limit on the number of circles that can be drawn on a Google map? -

on map of usa, have been asked draw 50,000 circles each 5000-yard radius.

the lat-lon locations scattered throughout country, large number of these circles overlap. opacity set 0.05; regions many superimposed circles become more opaque.

the circles start appear, after 30 seconds chrome crashes, displaying "he's dead, jim" message.

about error message:

according error: "he's dead, jim!":

you might see “he’s dead, jim!” message in tab if:

• you don’t have enough memory available run tab. computers rely on memory run apps, extensions, , programs. low memory can cause them run or stop working.
• you stopped process using google chrome's task manager, system's task manager, or command line tool.

---

it evidently occurs since trying render 50k objects. in order render such amount of objects recommend consider overlay approach. in case performance improved considerably since city icons ve rendered via canvas element instead of div ones.

having said that, below example demonstrates how render multiple amount of cities (1000 cities ) using described approach:

var overlay;  uscitiesoverlay.prototype = new google.maps.overlayview();    function uscitiesoverlay(map) {      this._map = map;      this._cities = [];      this._radius = 6;      this._container = document.createelement("div");      this._container.id = "citieslayer";      this.setmap(map);      this.addcity = function (lat, lng) {          this._cities.push({position: new google.maps.latlng(lat,lng)});      };  }      uscitiesoverlay.prototype.createcityicon = function (id,pos) {      /*var cityicon = document.createelement('div');      cityicon.setattribute('id', "cityicon_" + id);      cityicon.style.position = 'absolute';      cityicon.style.left = (pos.x - this._radius) + 'px';      cityicon.style.top = (pos.y - this._radius) + 'px';      cityicon.style.width = cityicon.style.height = (this._radius * 2) + 'px';      cityicon.classname = "circlebase city";      return cityicon;*/             var cityicon = document.createelement('canvas');        cityicon.id = 'cityicon_' + id;      cityicon.width = cityicon.height = this._radius * 2;      cityicon.style.width = cityicon.width + 'px';      cityicon.style.height = cityicon.height + 'px';      cityicon.style.left = (pos.x - this._radius) + 'px';        cityicon.style.top = (pos.y - this._radius) + 'px';       cityicon.style.position = "absolute";        var centerx = cityicon.width / 2;      var centery = cityicon.height / 2;      var ctx = cityicon.getcontext('2d');      ctx.fillstyle = 'rgba(160,16,0,0.6)';      ctx.beginpath();      ctx.arc(centerx, centery, this._radius, 0, math.pi * 2, true);      ctx.fill();        return cityicon;  };          uscitiesoverlay.prototype.ensurecityicon = function (id,pos) {      var cityicon = document.getelementbyid("cityicon_" + id);      if(cityicon){          cityicon.style.left = (pos.x - this._radius) + 'px';          cityicon.style.top = (pos.y - this._radius) + 'px';          return cityicon;      }      return this.createcityicon(id,pos);  };            uscitiesoverlay.prototype.onadd = function () {      var panes = this.getpanes();      panes.overlaylayer.appendchild(this._container);  };        uscitiesoverlay.prototype.draw = function () {      var zoom = this._map.getzoom();      var overlayprojection = this.getprojection();        var container = this._container;            this._cities.foreach(function(city,idx){          var xy = overlayprojection.fromlatlngtodivpixel(city.position);          var cityicon = overlay.ensurecityicon(idx,xy);          container.appendchild(cityicon);          });       };    uscitiesoverlay.prototype.onremove = function () {      this._container.parentnode.removechild(this._container);      this._container = null;  };                function getrandominterval(min, max) {      return math.random() * (max - min) + min;  }      function generatecitymap(count) {      var citymap = [];        var minpos = new google.maps.latlng(49.25, -123.1);      var maxpos = new google.maps.latlng(34.052234, -74.005973);              for(var = 0; < count;i++)      {         var lat = getrandominterval(minpos.lat(),maxpos.lat());         var lng = getrandominterval(minpos.lng(),maxpos.lng());         var population = getrandominterval(10000,1000000);             citymap.push({            location: new google.maps.latlng(lat, lng),            population: population         });        }        return citymap;  }          function initialize() {      var mapoptions = {          zoom: 4,          center: new google.maps.latlng(37.09024, -95.712891),          maptypeid: google.maps.maptypeid.terrain      };        var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);        overlay = new uscitiesoverlay(map);      overlay.addcity(40.714352, -74.005973);   //chicago      overlay.addcity(40.714352, -74.005973);   //newyork      overlay.addcity(34.052234, -118.243684);   //losangeles      overlay.addcity(49.25, -123.1);   //vancouver        var citymap = generatecitymap(1000);      citymap.foreach(function(city){            overlay.addcity(city.location.lat(), city.location.lng());         });        }      google.maps.event.adddomlistener(window, 'load', initialize);

html, body, #map-canvas {      height: 100%;      margin: 0px;      padding: 0px;  }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>  <div id="map-canvas"></div>