Limit the dynamic markers to one

Question

In the below plunker, i can add so many markers by selecting marker tool. But i need to limit it to only one. after adding one marker it should disable or the user should not be able to put another marker on map.
i have used ngMap https://ngmap.github.io/ . can anyone please help me

 <ng-map zoom="13" center="37.774546, -122.433523"
map-type-id="ROADMAP"
street-view-control-options="{position: 'LEFT_CENTER'}">
<drawing-manager
  on-overlaycomplete="vm.onMapOverlayCompleted()"
  drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','marker']}"
  drawingControl="true"
  drawingMode="null"

  rectangleOptions="{fillColor:'red'}"
  circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}" >
</drawing-manager>

the plunker is here : http://plnkr.co/edit/Hboz7DnD30JZAiNgD1G5?p=preview

Vadim Gremyachev · Accepted Answer · 2016-01-05T12:11:03.003

The following modified example demonstrates how to remove marker mode from drawing control once the marker is added on map (in order to prevent the user from adding another markers)

var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function () {
    var vm = this;

    vm.drawingControlOptions = {
        position: 'TOP_CENTER',
        drawingModes: ['polygon', 'marker']
    }

    vm.onMapOverlayCompleted = function (e) {

        if (e.type == google.maps.drawing.OverlayType.MARKER) {
            vm.drawingControlOptions.drawingModes.splice(1, 1);  //remove marker mode
        }
    };
});

 <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
 <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
 <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
<div ng-app="myapp" ng-controller="DrawingManagerCtrl as vm">
        <ng-map zoom="13" center="37.774546, -122.433523"
                map-type-id="ROADMAP"
                street-view-control-options="{position: 'LEFT_CENTER'}">
            <drawing-manager on-overlaycomplete="vm.onMapOverlayCompleted()"
                             drawing-control-options="{{vm.drawingControlOptions}}"
                             drawingControl="true"
                             drawingMode="null"
                             rectangleOptions="{fillColor:'red'}"
                             circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
            </drawing-manager>
        </ng-map>
 </div>

Plunker

Option 2

Another approach would be to disable marker from displaying on map once the first marker is rendered:

var app = angular.module('myapp', ['ngMap']);
app.controller('DrawingManagerCtrl', function () {
    var vm = this;
    vm.markersCounter = 0;
    vm.onMapOverlayCompleted = function (e) {
        if (e.type == google.maps.drawing.OverlayType.MARKER) {
            vm.markersCounter++;
            if (vm.markersCounter > 1)
                e.overlay.setMap(null);  //disable marker from diplaying .. 
        }
    };
});

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="myapp" ng-controller="DrawingManagerCtrl as vm" ng-click="disableClick(1)">
        <ng-map zoom="13" center="37.774546, -122.433523"
                map-type-id="ROADMAP"
                street-view-control-options="{position: 'LEFT_CENTER'}">
            <drawing-manager on-overlaycomplete="vm.onMapOverlayCompleted()"
                             on-click="vm.onClicked()"
                             drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon','marker']}"
                             drawingControl="true"
                             drawingMode="null"
                             rectangleOptions="{fillColor:'red'}"
                             circleOptions="{fillColor: '#FFFF00',fillOpacity: 1,strokeWeight: 5,clickable: false,zIndex: 1,editable: true}">
            </drawing-manager>
        </ng-map>
    </div>

Plunker

if i do like this, is it wrong. please see the plunker here https://plnkr.co/edit/WNpUjufCYCoW6MhCoEzE?p=preview — Thilak Raj, Jan 05 '16 at 11:39
You asked: _or the user should not be able to put another marker on map_ i demonstrated how to remove marker option. Do you need to **disable** marker button? — Vadim Gremyachev, Jan 05 '16 at 11:43
yeah, i got your point. Thanks for your help. my another question is , i am disabling the click using normal angular js code. can i do like that also or is that the wrong way of doing it — Thilak Raj, Jan 05 '16 at 11:46
No, my answer was wrong. i nee the thing like which you did above. Thank you once again — Thilak Raj, Jan 05 '16 at 12:09
Just updated the answer (see option 2), in that case there is no need to hide a button, may be it more preferable solution — Vadim Gremyachev, Jan 05 '16 at 12:13
Thanks, In the second option you have used `on-click="vm.onClicked()"` which is neither not defined nor not necessary. — Thilak Raj, Jan 05 '16 at 12:40
And also, Could you please tell me, how to get the co-ordinates of the point which the user put the marker. In the second solution , if the user tries to put another marker, the marker is not displaying or not adding at all? — Thilak Raj, Jan 05 '16 at 12:48

Limit the dynamic markers to one

1 Answers1

Option 2

Linked