CODEWITHSUNDEEP
javascriptgoogle-mapsdrawpolygon
Seif
Seif

Reputation: 51

Does Google Maps provide the ability to draw multiple polygons on a map?

Using the Google Maps JavaScript v3 API, is it possible to draw multiple separate polygons on the same map? And include a message box that appears after drawing each shape with an alert: 'Click rest to draw another'?

Upvotes: 2

Views: 2726

Answers (2)

Sean Mickey
Sean Mickey

Reputation: 7716

Yes, you are able to draw multiple polygons on the Map; check out the Drawing Library. If you want to display a message after completing one shape, you will want to define a listener function against the DrawingManager that listens for one of several possible completion event notifications:

google.maps.event.addListener(drawingMgr, 'overlaycomplete', function( event ){
    var shape = event.overlay;
    var path = shape.getPath();    //returns an MVCArray of LatLng instances
    for ( var i = 0; i < path.length; i++ ) {
        var lat = path.getAt(i).lat(); //Corrected as per MVCArray
        var lng = path.getAt(i).lng(); //Corrected as per MVCArray
        //do something with the data...
    }
    //put your message display code here
});

Within the function callback, you have access to the shape that was just completed. So in the code above, event.overlay will provide you with a direct reference to the shape. If we assume that the shape is a Polygon, you would then be able to access the shape's members directly, as shown above. The full set of Polygon members is documented here.

Upvotes: 2

Seif
Seif

Reputation: 51

I put the whole code as worked for me : 

enter code here
google.maps.event.addListener(drawingMgr, 'overlaycomplete', function( event ){
var shape = event.overlay;
var path = shape.getPath();    //returns an Array of LatLng
for ( var i = 0; i < path.length; i++ ) {
    var lat = path.getAt(i).lat();
    var lng = path.getAt(i).lng();
    //do something with the data...
}
//put your message display code here

});

Upvotes: 0

Related Questions