Question

In functions presented below are repeated the same operations. I’d like to move as much as possible to the object. Maybe it is possible directly from button once initialize right method in object?

HTML:

<div id="map" style="width: 500px; height: 400px;"></div>
<button onclick="drawPoly()">Draw This Poly</button>
<button onclick="newPoly()">Create New Poly</button>
<button onclick="restorePolys()">Restore Polys</button>
<button onclick="dropMarker()">Drop Marker</button>

JS:

var map;
var mapListener = null;

$(function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

dropMarker = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.createMarker(e.latLng);
    });
}

drawPolyline = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}

newPolyline = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    tools.createPolyline();
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}

newPolygon = function() {
    if ( !! mapListener) google.maps.event.removeListener(mapListener);

    tools.createPolygon();
    mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools.addPoint(e.latLng);
    });
}

var tools = {
    polyMarkers: [],
    polyLines: [],
    polyLine: null,
    // ...

    // mapListener: null,
    // tools: function(option) {
    //     if ( !! this.mapListener) google.maps.event.removeListener(this.mapListener);
    //     this.mapListener = google.maps.event.addListener(map, 'click', function(e) {
    //         option(e.latLng);
    //     });
    // },
    // and so on

EDIT I got expected function, added to tools:

mapListener: null,

initFeature: function(type, aspect) {
    if ( !! this.mapListener) google.maps.event.removeListener(this.mapListener);

    if (aspect) this[aspect]();

    this.mapListener = google.maps.event.addListener(map, 'click', function(e) {
        tools[type](e.latLng);
    });
},

Call:

tools.initFeature(type, aspect);

Answer 1

If I get what you are trying to do maybe having a builder function will help, something like this that should handle most of your case usage.

function MakeNew(act1, act2) {

    return function() {

        if ( !! mapListener) google.maps.event.removeListener(mapListener);

        if ( act2 ) tools[act2]();

        mapListener = google.maps.event.addListener(map, 'click', function(e) {
            tools[act1](e.latLng);
        });
    };
};


dropMarker = MakeNew('createMarker');
newPolygon = MakeNew('addPoint', 'createPolygon');
createPolygon = MakeNew('addPoint', 'createPolyline');