[OpenLayers-Users] Memory Leak in Open Layers 2.12 with Google Maps v3?

Tue Jun 11 16:49:00 PDT 2013

Hi,

I am relatively new to Open Layers, but I think I am seeing a memory
leak when using Open Layers 2.12 with google maps v3 as a base map.

I constructed two simple html files/apps which use the google maps v3
api to provide a base map.  In one file I use the google maps api
directly.  In the other I use Open Layers and use google maps v3 as
the base layer.

I created an automated test script (using AutoIT) to do a series of
mouse actions that cause the map to pan up and down and then left and
right for 15 minutes.  I applied this test to both html apps and used
the same screen sizes and map center points.  In my tests I see a leak
rate of about 100 mb/hr when using google maps v3 alone.  When I use
Open Layers I see a leak rate of about 2000 mb/hr - or about 20 times
the rate of google maps alone.

If I use the google maps v2 API I don't see a leak in either google
maps or Open Layers.

Can someone please confirm if I am seeing an actual leak or if I am
simply doing something wrong with Open Layers?

Here are the two html apps in full:

Google Maps v3 version:

<html>
  <head>
    <title>Simple Map</title>
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 16,
          center: new google.maps.LatLng(42.336898249865152,
-71.59534692764282),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Open layers Version (assumes that Open Layers 2.12 is in ../lib/OpenLayers.js):

<html>
    <head>
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <title>OpenLayers Google (v3) Layer Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
    <script src="../lib/OpenLayers.js"></script>
    <script>
      var map;
      function initialize() {
          var mapOptions = {zoom: 16};
          map = new
OpenLayers.Map(document.getElementById("map-canvas"), mapOptions);

        var mapLayer = new OpenLayers.Layer.Google( "Google Map",
{type: google.maps.MapTypeId.ROADMAP} );

          map.addLayers([mapLayer]);
          map.setCenter(new OpenLayers.LonLat(-71.59534692764282,
42.336898249865152).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject()), 16);
      }
    </script>
    </head>
   <body onload="initialize()">
        <div id="map-canvas"></div>
    </body>
</html>