title: How to copy and scale a Shape using the Google Maps Javascript API drawing library?
body: <p>I'm creating a Google Map in my React application, where I would like the user to be able to draw shapes, with an additional functionality being that once a user finishes drawing a shape, an additional shape must be added to it as an outline, as shown in the images below:</p>
  
  <p><strong>User drawn shape:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/xVwfh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xVwfh.png" alt="enter image description here"></a></p>
  
  <p><strong>Functionality I'm aiming to add, right after the user finishes drawing the shape:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cdlFF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cdlFF.png" alt="enter image description here"></a></p>
  
  <p>I'm using the drawing library of Google Maps as shown here:
  <a href="https://developers.google.com/maps/documentation/javascript/examples/drawing-tools" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/drawing-tools</a></p>
  
  <p>Here is the relevant code I'm using:</p>
  
  <pre><code>    // When a circle is drawn
      google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
        let tempCirc = new google.maps.Circle({ 
          radius: circle.getRadius()*2, 
          center: circle.getCenter(),
          editable: true,
          map: map
        })
      });
  
     // When a rectangle is drawn
     google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rect) {
        let tempRect = new google.maps.Rectangle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            editable: true,
            draggable: true
          })
  
        rectangle.setBounds(
          new google.maps.LatLngBounds(
            new google.maps.LatLng(
              rect.getBounds().getSouthWest().lat() - .005, 
              rect.getBounds().getSouthWest().lng() - .005*2
            ),
            new google.maps.LatLng(
              rect.getBounds().getNorthEast().lat() + .005, 
              rect.getBounds().getNorthEast().lng() + .005*2
            ),
          )
        )
      });
  
      // When a polygon is drawn
      google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
        // What can I do here?
      });
  </code></pre>
  
  <p>If there is any other way to do this on a Google map, please let me know too.</p>