limit number of added markers on gmap v3

Question

Using google map v3 and a small jquery plugin, i have made a page for users, to add points/markers on google map.
So far this works perfectly.
Now, i need to improve this functionality and allow users to add multiple number of markers/points on the map.
Each user will be limited to a specific number of points he can add.
This number is unique per user - so it must be variable.

The js code i use so far is this.

$("#my_map").gmap3({
    map:{
        options:{
            center:[start_lat, start_long],
            zoom: start_zoom,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions:  {   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU    },
            navigationControl: true,
            scrollwheel: true,
            streetViewControl: false
        },
        events:{                    
            click: function(map, event) // clicking on map adds a new marker
            {
                var lat = event.latLng.lat(), 
                    lng = event.latLng.lng();
                // save to form
                $("#map_lat").val(lat);
                $("#map_long").val(lng);
                $("#map_zoom").val( map.getZoom() );

                $(this).gmap3({
                    clear: { id: ["newTag"] }, // remove old/new tags (based on marker id value)
                    marker: { id: 'newTag', latLng: event.latLng } // add new marker on map
                });
            } // end click
        } // end event
    } // end map
});

map = $("#my_map").gmap3('get');
google.maps.event.trigger(map, 'resize');

start_lat, start_long, start_zoom are parameters passed into the function.
map_lat, map_long, map_zoom are ids in the form of the page - clicking on map populate these fields.

Now, lets assume i want to allow only 2 markers to be added.
I can generate proper unique ids in the form to be populated.
I can pass another variable in the function to know the limit of markers.
But how do i modify the click events to limit them?

I hope this makes sense.


EDIT: I have managed to do what i, in a non-elegant way. I wonder if there is something more elegant?

// assuming var maxItems=2 (argument in function
                for (var i=0; i<=maxItems; i++)
                {
                    if ( $("#map_lat"+i).val()=='' || $("#map_long"+i).val()=='' || $("#map_zoom"+i).val()==''      )
                    {
                        // populate form fields
                        $("#map_lat"+i).val(lat);
                        $("#map_long"+i).val(lng);
                        $("#map_zoom"+i).val( map.getZoom() );

                        $(this).gmap3({
                            clear: { id: ["newTag"+i] }, // remove old/new tags (based on marker id value)
                            marker: { id: 'newTag'+i, latLng: event.latLng } // add new marker on map
                        }); 

                        break;
                    }


}

Answer 1

you can create markers simply by the following way and manage separate arrays for user..

var markers = new Object();
function click_event(user_id)
{ 
    var marker = new google.maps.Marker({
      position:mycenter,
      title:infoName,
      id: count++
      // animation:google.maps.Animation.BOUNCE
      });

    markers[user_id].push(marker);

    display_markers(user_id, limit);
}

function display_markers(user_id, limit)
{
    remove_markers(); //remove all previous markers from map
    for( var i = 0; i < limit ; i++ )
    {
        markers[user_id][i].setMap(map); //will set limited markers for particular user
    }
}