title: Undefined is not a function when calling getZIndez() for Google Maps polygon
body: <p>I have a Google Map in my view and i'm adding lots of polygons to it. The problem is that i have polygons of different sizes, overlapping. i need to set the z-index for each polygon so i can use the click listener properly. </p>
  
  <p>The process should be straight forward, but as i noticed, it isn't.
  I'm hit with this error when trying to call either the getZIndex() method or setZindex().</p>
  
  <pre><code>Undefined is not a function (evaluating 'shape.setZIndex()')
  </code></pre>
  
  <p>This is my code:</p>
  
  <pre><code>function attachMap(params){
      removeMap();
      var options = $.extend(true, {
          shapesData: [],
          shapeClick: function(event){}
      },params);
  
      var mapOptions = {
          zoom: 5,
          center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
          mapTypeId: google.maps.MapTypeId.TERRAIN
      };
  
      // Create the Google Maps shapes and append them to the map
      shapes = [];
      map = new google.maps.Map(document.getElementById('dxf-shapes'), mapOptions);
      if(typeof options.shapesData != "undefined") {
          $.each(options.shapesData, function (shapeIndex, shapeData) {
              var paths = [];
              // points of the shape
              $.each(shapeData.points, function (pointIndex, pointData) {
                  var mapsPoint = new google.maps.LatLng(pointData.lat, pointData.lng);
                  paths.push(mapsPoint);
              });
  
              // new shape from the points
              var shape = new google.maps.Polygon({
                  paths: paths,
                  strokeColor: 'rgb(' + shapeData.color + ')',
                  strokeOpacity: 1,
                  strokeWeight: 1.5,
                  fillColor: 'rgb(' + shapeData.color + ')',
                  fillOpacity: 0,
                  geodesic: true,
                  zIndex: 1
              });
  
              shapes.push(shape);
          });
  
          shapes.sort(function(a, b){
              var aArea = google.maps.geometry.spherical.computeArea(a.getPath());
              var bArea = google.maps.geometry.spherical.computeArea(b.getPath());
  
              if( aArea &lt; bArea ){
                  return -1;
              }
              if(aArea &gt; bArea){
                  return 1;
              }
  
              return 0;
          });
  
          var zIndex = 0;
          $.each(shapes, function(index, shape){
              zIndex++;
              //append the shape to the map
              shape.setMap(map);
              shape.setZIndex(zIndex);
  
              google.maps.event.addListener(shape, 'click', options.shapeClick);
          });
      }
  }
  </code></pre>