title: Selecting Polygon on Google Maps V3
body: <p>My project is to create a zone management module for a online business.</p>
  
  <p>The business owner / admin can create new zones by drawing them as POLYGONS on a google map. </p>
  
  <p>I am able to draw polygons, select between them fetch the coordinates and save them without any problem.</p>
  
  <p>However when i try to fetch the existing coordinates stored in the database and draw them on screen, they get rendered properly, but i am not able to select them.</p>
  
  <p>I have been using google's code samples to test out the functionality.</p>
  
  <p>The Code i am using to draw existing coordinates is</p>
  
  <pre><code>var triangleCoords = [
  new google.maps.LatLng(25.774252, -80.190262),
  new google.maps.LatLng(18.466465, -66.118292),
  new google.maps.LatLng(32.321384, -64.75737),
  new google.maps.LatLng(25.774252, -80.190262)
  ];
  
  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35
  });
  
  bermudaTriangle.setMap(map);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>The Code i am using for Drawing Polygons on the screen using the Drawing Manager is also from a Google sample</p>
  
  <pre><code>function initialize() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(22.344, 114.048),
        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);
        }
      });
  
      // 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>
  
  <p>Since the function i am using to select between the polygons checks for overlay complete using the drawing manager,  </p>
  
  <pre><code>google.maps.drawing.OverlayType.POLYGON
  </code></pre>
  
  <p>i am not able to select polygons drawn using</p>
  
  <pre><code>google.maps.Polygon
  </code></pre>
  
  <p>so tldr</p>
  
  <p>1 ) how do i check if i am selecting a Polygon on google maps ?</p>
  
  <p>OR</p>
  
  <p>2) How do i draw pre defined polygon points using the Drawing Manager?</p>
  
  <p>Thanks.</p>