CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3
Jeeva J
Jeeva J

Reputation: 3251

Load polygon in Google map api

I want to implement like user can draw a area in google map from our application. Then when he come back, then should load the data which is previously drew by him/her.

I've done two way of method. One is,

  1. Using Drawing manager.

    Drawing Polygon in google map using javascript

    https://developers.google.com/maps/documentation/javascript/drawinglayer

  2. Using Google map api data layer. http://jsfiddle.net/dg9e93qy/

From the first method, I can allow user to drag, and can restrict user from drawing multiple polygons. But I cannot load the polygons again to this drawing. But I found somewhere that we can load the polygons. https://developers.google.com/maps/documentation/javascript/examples/polygon-simple.

But this is using the polygon instance to show the polygons not the drawing.

Here I need any other two solutions.

From the Second method, I can get the coordinates, and can load the polygon again. But I cannot get the polygon area from that. (Actually I am getting the geoJson data)

Here I cannot get the Area for Drawn place. How to do that?

Any answer from the first method or the second methods is good.

Upvotes: 2

Views: 2218

Answers (1)

Jeeva J
Jeeva J

Reputation: 3251

I have done alternate that, created polygon instead of loading in the same drawing manager.

After drawing complete, removed drawing manager and then created the polygon. Then had a separate button to remove the polygon from the map.

If we remove the polygon, then removed the polygon from the map and recreated the drawing manger.

This solved my issue.

drawingManager.setMap(null);
                    bermudaTriangle = new google.maps.Polygon({
                        paths: polygonsArray,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                        //,editable: true
                    });
                    bermudaTriangle.setMap(map);

Upvotes: 1

Related Questions