title: Google Maps Draw Tool outputting polygon coordinates
body: <p>I have searched SO for this answer and I haven't been able to come up with a definitive answer as of yet...</p>
  
  <p>Here's the problem:  When I try to write my polygon coordinates to <code>console</code> it works if the tool chosen is a polygon.  However when I use Square or Circle, I get the error</p>
  
  <pre><code>e.overlay.getPath is not a function
  </code></pre>
  
  <p>With my current code, I am thinking that the <code>else</code> should catch the square and circle.  Obviously I am mistaken ...</p>
  
  <p>Here is what I have:</p>
  
  <pre><code>if (e.type == google.maps.drawing.OverlayType.POLYLINE || google.maps.drawing.OverlayType.POLYGON) {
              var locations = e.overlay.getPath().getArray()
              //console.log(bounds.toString());    
              console.log(locations.toString() + " 1st instace");
          }
          else {
              //get lat/lng bounds of the current shape
              var bounds = e.overlay.getBounds();
              var start = bounds.getNorthEast();
              var end = bounds.getSouthWest();
              var center = bounds.getCenter();
              //console.log(bounds.toString());    
              consol.log(bounds.toString() + " 2nd instance");
          }
  </code></pre>
  
  <p>And the entire snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var drawingManager;
  var selectedShape;
  var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
  var selectedColor;
  var colorButtons = {};
  
  function clearSelection() {
    if (selectedShape) {
      selectedShape.setEditable(false);
      selectedShape = null;
    }
  }
  
  function setSelection(shape) {
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);
    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
  }
  
  function deleteSelectedShape() {
    if (selectedShape) {
      selectedShape.setMap(null);
    }
  }
  
  function selectColor(color) {
    selectedColor = color;
    for (var i = 0; i &lt; colors.length; ++i) {
      var currColor = colors[i];
      colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
    }
  
    // Retrieves the current options from the drawing manager and replaces the
    // stroke or fill color as appropriate.
    var polylineOptions = drawingManager.get('polylineOptions');
    polylineOptions.strokeColor = color;
    drawingManager.set('polylineOptions', polylineOptions);
  
    var rectangleOptions = drawingManager.get('rectangleOptions');
    rectangleOptions.fillColor = color;
    drawingManager.set('rectangleOptions', rectangleOptions);
  
    var circleOptions = drawingManager.get('circleOptions');
    circleOptions.fillColor = color;
    drawingManager.set('circleOptions', circleOptions);
  
    var polygonOptions = drawingManager.get('polygonOptions');
    polygonOptions.fillColor = color;
    drawingManager.set('polygonOptions', polygonOptions);
  }
  
  function setSelectedShapeColor(color) {
    if (selectedShape) {
      if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
        selectedShape.set('strokeColor', color);
      } else {
        selectedShape.set('fillColor', color);
      }
    }
  }
  
  function makeColorButton(color) {
    var button = document.createElement('span');
    button.className = 'color-button';
    button.style.backgroundColor = color;
    google.maps.event.addDomListener(button, 'click', function() {
      selectColor(color);
      setSelectedShapeColor(color);
    });
  
    return button;
  }
  
  function buildColorPalette() {
    var colorPalette = document.getElementById('color-palette');
    for (var i = 0; i &lt; colors.length; ++i) {
      var currColor = colors[i];
      var colorButton = makeColorButton(currColor);
      colorPalette.appendChild(colorButton);
      colorButtons[currColor] = colorButton;
    }
    selectColor(colors[0]);
  }
  
  function showArrays(event) {
    // Since this polygon has only one path, we can call getPath() to return the
    // MVCArray of LatLngs.
    var vertices = this.getPath();
  
    var contentString = '&lt;b&gt;Bermuda Triangle polygon&lt;/b&gt;&lt;br&gt;' +
      'Clicked location: &lt;br&gt;' + event.latLng.lat() + ',' + event.latLng.lng() +
      '&lt;br&gt;';
  
    // Iterate over the vertices.
    for (var i = 0; i &lt; vertices.getLength(); i++) {
      var xy = vertices.getAt(i);
      contentString += '&lt;br&gt;' + 'Coordinate ' + i + ':&lt;br&gt;' + xy.lat() + ',' +
        xy.lng();
    }
  }
  
  
  function initialize() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(acheived_lat, acheived_lon),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      zoomControl: true
    });
    var polyOptions = {
      strokeWeight: 0,
      fillOpacity: 0.45,
      editable: true
    };
    // Creates a drawing manager attached to the map that allows the user to draw
    // markers, lines, and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      markerOptions: {
        draggable: true
      },
      polylineOptions: {
        editable: true
      },
      rectangleOptions: polyOptions,
      circleOptions: polyOptions,
      polygonOptions: polyOptions,
      map: map
    });
  
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
      if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);
  
        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
        });
  
        setSelection(newShape);
  
        if (e.type == google.maps.drawing.OverlayType.POLYLINE || google.maps.drawing.OverlayType.POLYGON) {
          var locations = e.overlay.getPath().getArray()
            //console.log(bounds.toString());    
          alert(locations.toString() + " 1st instace");
        } else {
          //get lat/lng bounds of the current shape
          var bounds = e.overlay.getBounds();
          var start = bounds.getNorthEast();
          var end = bounds.getSouthWest();
          var center = bounds.getCenter();
          //console.log(bounds.toString());    
          alert(bounds.toString() + " 2nd instance");
        }
      }
    });
  
    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
  
    buildColorPalette();
  }
  google.maps.event.addDomListener(window, 'load', initialize);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map div {
    width: auto;
  }
  #map {
    height: 500px;
    width: 80%;
    margin-top: 32px;
  }
  #map,
  html,
  body {
    padding: 0;
    margin: 0;
    width: 960px;
    height: 300px;
  }
  #panel {
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    float: right;
    margin: 10px;
  }
  #color-palette {
    clear: both;
  }
  .color-button {
    width: 14px;
    height: 14px;
    font-size: 0;
    margin: 2px;
    float: left;
    cursor: pointer;
  }
  #delete-button {
    margin-top: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="map"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&amp;libraries=drawing"&gt;
  &lt;/script&gt;
  &lt;script&gt;
    window.acheived_lat = 36.825230;
    window.acheived_lon = -119.702919;
  &lt;/script&gt;
  &lt;div id="panel"&gt;
    &lt;div id="color-palette"&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;button id="delete-button"&gt;Delete Selected Shape&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know it's probably something that has to do with the else.  I have tried <code>|| SQUARE</code> in the main <code>if</code> as well to no avail.  Stumped!</p>