My project is to create a zone management module for a online business.

The business owner / admin can create new zones by drawing them as POLYGONS on a google map.

I am able to draw polygons, select between them fetch the coordinates and save them without any problem.

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.

I have been using google's code samples to test out the functionality.

The Code i am using to draw existing coordinates is

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);

The Code i am using for Drawing Polygons on the screen using the Drawing Manager is also from a Google sample

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, 'overlayplete', 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);

Since the function i am using to select between the polygons checks for overlay plete using the drawing manager,

google.maps.drawing.OverlayType.POLYGON

i am not able to select polygons drawn using

google.maps.Polygon

so tldr

1 ) how do i check if i am selecting a Polygon on google maps ?

OR

2) How do i draw pre defined polygon points using the Drawing Manager?

Thanks.

My project is to create a zone management module for a online business.

The business owner / admin can create new zones by drawing them as POLYGONS on a google map.

I am able to draw polygons, select between them fetch the coordinates and save them without any problem.

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.

I have been using google's code samples to test out the functionality.

The Code i am using to draw existing coordinates is

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);

The Code i am using for Drawing Polygons on the screen using the Drawing Manager is also from a Google sample

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, 'overlayplete', 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);

Since the function i am using to select between the polygons checks for overlay plete using the drawing manager,

google.maps.drawing.OverlayType.POLYGON

i am not able to select polygons drawn using

google.maps.Polygon

so tldr

1 ) how do i check if i am selecting a Polygon on google maps ?

OR

2) How do i draw pre defined polygon points using the Drawing Manager?

Thanks.

• javascript
• google-maps
• google-maps-api-3
• geolocation
• maps

• 1 What do you mean by selecting a Polygon? Clicking on it? – MrUpsidown Commented Mar 30, 2015 at 11:55
• Do you have multiple initialize functions? Could you please provide a Minimal, Complete, Tested and Readable example that demonstrates the issue? I get a javascript error with the posted code Uncaught ReferenceError: clearSelection is not defined – geocodezip Commented Mar 30, 2015 at 13:14
• Uncaught ReferenceError: deleteSelectedShape is not defined – geocodezip Commented Mar 30, 2015 at 13:21
• Yes selecting a Polygon by Clicking on It. – Javid Commented Mar 31, 2015 at 4:59
• working code : codepen.io/anon/pen/qEvGYE – Javid Commented Mar 31, 2015 at 10:54

1 Answer 1

Add a click event listener to your polygon and get its paths:

google.maps.event.addListener(bermudaTriangle, 'click', function () {
    var polygonPaths = this.getPaths();
});

Check the documented Polygon methods and events.