Dynamically adding CIRCLE or POLYGON to google map using angular js

Question

I need to add different shapes such as CIRCLE and POLYGON dynamically to google map using angularjs. For eg: Suppose I enter the lat and long in text box and other options like fillColor and radius and by clicking on generate, the circle should be generated on google map. I am using angular-google-map directive for generating the map. I am able to generate the circle using this

<ui-gmap-marker coords="marker.coords" options="marker.options" idkey="marker.id">
</ui-gmap-marker>
<ui-gmap-circle ng-repeat="c in circles track by c.id" center="c.center" stroke="c.stroke" fill="c.fill" radius="c.radius" visible="c.visible" geodesic="c.geodesic" editable="c.editable" draggable="c.draggable" clickable="c.clickable" control="c.control"> </ui-gmap-circle>

But I need to generate it dynamically something like this http://www.freemaptools.com/radius-around-point.htm

score 2 · Accepted Answer · answered Feb 15 '15 at 07:56

Finally I figured out the solution after a bit research and help. I used the simple function to change the shape

$scope.chooseShape = function(shape) {
   $scope.shapeShow = shape;
return

And using ng-if I am showing the

<ui-gmap-circle ng-repeat="c in circles track by c.id" center="c.center" ng-if="shapeShow=='CIRCLE'"></ui-gmap-circle>              
<ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" ng-if="shapeShow == 'POLYGON'"></ui-gmap-drawing-manager>

and finally using ng-repeat on these circle and polygon to display as number of shapes a user can add.

score 1 · Answer 2 · edited May 23 '17 at 12:29

There's a much easier to understand and use AngularJS Google MAP Directive created by one of the members if Stackoverflow. Please find it here.

Using this directive you can do something like this:

<map zoom="11" center="[40.74, -74.18]">
    <shape  id="polyline" name="polyline"
            geodesic="true" stroke-color="#FF0000"
            stroke-opacity="1.0" stroke-weight="2"
            path="[[40.74,-74.18],[40.64,-74.10],[40.54,-74.05],[40.44,-74]]" >
    </shape>
    <shape  id="polygon" name="polygon"
            stroke-color="#FF0000" stroke-opacity="1.0" stroke-weight="2"
            paths="[[40.74,-74.18],[40.64,-74.18],[40.84,-74.08],[40.74,-74.18]]">
    </shape>
    <shape  id="rectangle" name="rectangle" stroke-color='#FF0000'
            stroke-opacity="0.8" stroke-weight="2"
            bounds="[[40.74,-74.18], [40.78,-74.14]]" editable="true">
    </shape>
    <shape  id="circle" name="circle" stroke-color='#FF0000'
            stroke-opacity="0.8"stroke-weight="2"
            center="[40.70,-74.14]" radius="4000" editable="true">
    </shape>
    <shape  id="image" name="image"
            url="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
            bounds="[[40.71,-74.22],[40.77,-74.12]]" opacity="0.7" clickable="true">
    </shape>
</map>

Its simple to understand and can be easily managed in your angular ui code.

Here's the Git link for this directive

Hope this helps...

Sample Solution :
Here's the solution to dynamically change the shape and co-ordinates in a Google Map. Its based on the API mentioned above.

Please tell me one more thing Benison. How to add shapes dynamically ? If I append the HTML in DOM then it not working. I don't want to refresh the map at the time of creating the circle — sushantkr, Feb 15 '15 at 04:39
If you change the values from the code i.e. controller it should work. Stay tuned. Coming up with a sample code. — Benison Sam, Feb 15 '15 at 04:45
Happy, I could help. Sushant, Can you please post here your answer, some pointers and parts of your code showing how you solved this through your code. Helps me and other developers who need some hint with the same problem... — Benison Sam, Feb 15 '15 at 07:39

Dynamically adding CIRCLE or POLYGON to google map using angular js

2 Answers2