Remove the input box

Question

Hi how would i remove the Change Color input box without ruining all the other controls ?

Thanks

Code is below the bit i am concerned about is in the last lines

function PolygonCreator(map) {
    this.map = map;
    this.pen = new Pen(this.map);
    var thisOjb = this;
    this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) {
        thisOjb.pen.draw(event.latLng);
    });
    this.showData = function () {
        return this.pen.getData();
    }
    this.showColor = function () {
        return this.pen.getColor();
    }
    this.destroy = function () {
        this.pen.deleteMis();
        if (null != this.pen.polygon) {
            this.pen.polygon.remove();
        }
        google.maps.event.removeListener(this.event);
    }
}

function Pen(map) {
    this.map = map;
    this.listOfDots = new Array();
    this.polyline = null;
    this.polygon = null;
    this.currentDot = null;
    this.draw = function (latLng) {
        if (null != this.polygon) {
            alert('Click Reset to draw another');
        } else {
            if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) {
                this.drawPloygon(this.listOfDots);
            } else {
                if (null != this.polyline) {
                    this.polyline.remove();
                }
                var dot = new Dot(latLng, this.map, this);
                this.listOfDots.push(dot);
                if (this.listOfDots.length > 1) {
                    this.polyline = new Line(this.listOfDots, this.map);
                }
            }
        }
    }
    this.drawPloygon = function (listOfDots, color, des, id) {
        this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
        this.deleteMis();
    }
    this.deleteMis = function () {
        $.each(this.listOfDots, function (index, value) {
            value.remove();
        });
        this.listOfDots.length = 0;
        if (null != this.polyline) {
            this.polyline.remove();
            this.polyline = null;
        }
    }
    this.cancel = function () {
        if (null != this.polygon) {
            (this.polygon.remove());
        }
        this.polygon = null;
        this.deleteMis();
    }
    this.setCurrentDot = function (dot) {
        this.currentDot = dot;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getData = function () {
        if (this.polygon != null) {
            var data = "";
            var paths = this.polygon.getPlots();
            paths.getAt(0).forEach(function (value, index) {
                data += (value.toString());
            });
            return data;
        } else {
            return null;
        }
    }
    this.getColor = function () {
        if (this.polygon != null) {
            var color = this.polygon.getColor();
            return color;
        } else {
            return null;
        }
    }
}

function Dot(latLng, map, pen) {
    this.latLng = latLng;
    this.parent = pen;
    this.markerObj = new google.maps.Marker({
        position: this.latLng,
        map: map
    });
    this.addListener = function () {
        var parent = this.parent;
        var thisMarker = this.markerObj;
        var thisDot = this;
        google.maps.event.addListener(thisMarker, 'click', function () {
            parent.setCurrentDot(thisDot);
            parent.draw(thisMarker.getPosition());
        });
    }
    this.addListener();
    this.getLatLng = function () {
        return this.latLng;
    }
    this.getMarkerObj = function () {
        return this.markerObj;
    }
    this.remove = function () {
        this.markerObj.setMap(null);
    }
}

function Line(listOfDots, map) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.polylineObj = null;
    if (this.listOfDots.length > 1) {
        var thisObj = this;
        $.each(this.listOfDots, function (index, value) {
            thisObj.coords.push(value.getLatLng());
        });
        this.polylineObj = new google.maps.Polyline({
            path: this.coords,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: this.map
        });
    }
    this.remove = function () {
        this.polylineObj.setMap(null);
    }
}

function Polygon(listOfDots, map, pen, color) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.parent = pen;
    this.des = 'Hello';
    var thisObj = this;
    $.each(this.listOfDots, function (index, value) {
        thisObj.coords.push(value.getLatLng());
    });
    this.polygonObj = new google.maps.Polygon({
        paths: this.coords,
        strokeColor: "#3333FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#3333FF",
        fillOpacity: 0.35,
        map: this.map
    });
    this.remove = function () {
        this.info.remove();
        this.polygonObj.setMap(null);
    }
    this.getContent = function () {
        return this.des;
    }
    this.getPolygonObj = function () {
        return this.polygonObj;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getPlots = function () {
        return this.polygonObj.getPaths();
    }
    this.getColor = function () {
        return this.getPolygonObj().fillColor;
    }
    this.setColor = function (color) {
        return this.getPolygonObj().setOptions({
            fillColor: color,
            strokeColor: color,
            strokeWeight: 2
        });
    }
    this.info = new Info(this, this.map);
    this.addListener = function () {
        var info = this.info;
        var thisPolygon = this.polygonObj;
        google.maps.event.addListener(thisPolygon, 'rightclick', function (event) {
            info.show(event.latLng);
        });
    }
    this.addListener();
}

function Info(polygon, map) {
    this.parent = polygon;
    this.map = map;
    this.color = document.createElement('input');
    this.button = document.createElement('input');
    $(this.button).attr('type', 'button');
    $(this.button).val("Change Color");
    var thisOjb = this;
    this.changeColor = function () {
        thisOjb.parent.setColor($(thisOjb.color).val());
    }
    this.getContent = function () {
        var content = document.createElement('div');
        $(this.color).val(this.parent.getColor());
        $(this.button).click(function () {
            thisObj.changeColor();
        });
        $(content).append(this.color);
        $(content).append(this.button);
        return content;
    }
    thisObj = this;
    this.infoWidObj = new google.maps.InfoWindow({
        content: thisObj.getContent()
    });
    this.show = function (latLng) {
        this.infoWidObj.setPosition(latLng);
        this.infoWidObj.open(this.map);
    }
    this.remove = function () {
        this.infoWidObj.close();
    }
}

Answer 1

It appears that button is only ever referenced inside that last function, Info . So I'd say it would be safe to comment out the 5 lines within that function that refer to it (as well as the 2 extra lines that form part of the click handler).

If you just want to hide this button from the user, you may just want to, literally, .hide() it after Info is called. This will be the least intrusive.

$('input[value="Change Color"]').hide();

Answer 2

    function PolygonCreator(map) {
    this.map = map;
    this.pen = new Pen(this.map);
    var thisOjb = this;
    this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) {
        thisOjb.pen.draw(event.latLng);
    });
    this.showData = function () {
        return this.pen.getData();
    }
    this.showColor = function () {
        return this.pen.getColor();
    }
    this.destroy = function () {
        this.pen.deleteMis();
        if (null != this.pen.polygon) {
            this.pen.polygon.remove();
        }
        google.maps.event.removeListener(this.event);
    }
}

function Pen(map) {
    this.map = map;
    this.listOfDots = new Array();
    this.polyline = null;
    this.polygon = null;
    this.currentDot = null;
    this.draw = function (latLng) {
        if (null != this.polygon) {
            alert('Click Reset to draw another');
        } else {
            if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) {
                this.drawPloygon(this.listOfDots);
            } else {
                if (null != this.polyline) {
                    this.polyline.remove();
                }
                var dot = new Dot(latLng, this.map, this);
                this.listOfDots.push(dot);
                if (this.listOfDots.length > 1) {
                    this.polyline = new Line(this.listOfDots, this.map);
                }
            }
        }
    }
    this.drawPloygon = function (listOfDots, color, des, id) {
        this.polygon = new Polygon(listOfDots, this.map, this, color, des, id);
        this.deleteMis();
    }
    this.deleteMis = function () {
        $.each(this.listOfDots, function (index, value) {
            value.remove();
        });
        this.listOfDots.length = 0;
        if (null != this.polyline) {
            this.polyline.remove();
            this.polyline = null;
        }
    }
    this.cancel = function () {
        if (null != this.polygon) {
            (this.polygon.remove());
        }
        this.polygon = null;
        this.deleteMis();
    }
    this.setCurrentDot = function (dot) {
        this.currentDot = dot;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getData = function () {
        if (this.polygon != null) {
            var data = "";
            var paths = this.polygon.getPlots();
            paths.getAt(0).forEach(function (value, index) {
                data += (value.toString());
            });
            return data;
        } else {
            return null;
        }
    }
    this.getColor = function () {
        if (this.polygon != null) {
            var color = this.polygon.getColor();
            return color;
        } else {
            return null;
        }
    }
}

function Dot(latLng, map, pen) {
    this.latLng = latLng;
    this.parent = pen;
    this.markerObj = new google.maps.Marker({
        position: this.latLng,
        map: map
    });
    this.addListener = function () {
        var parent = this.parent;
        var thisMarker = this.markerObj;
        var thisDot = this;
        google.maps.event.addListener(thisMarker, 'click', function () {
            parent.setCurrentDot(thisDot);
            parent.draw(thisMarker.getPosition());
        });
    }
    this.addListener();
    this.getLatLng = function () {
        return this.latLng;
    }
    this.getMarkerObj = function () {
        return this.markerObj;
    }
    this.remove = function () {
        this.markerObj.setMap(null);
    }
}

function Line(listOfDots, map) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.polylineObj = null;
    if (this.listOfDots.length > 1) {
        var thisObj = this;
        $.each(this.listOfDots, function (index, value) {
            thisObj.coords.push(value.getLatLng());
        });
        this.polylineObj = new google.maps.Polyline({
            path: this.coords,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: this.map
        });
    }
    this.remove = function () {
        this.polylineObj.setMap(null);
    }
}

function Polygon(listOfDots, map, pen, color) {
    this.listOfDots = listOfDots;
    this.map = map;
    this.coords = new Array();
    this.parent = pen;
    this.des = 'Hello';
    var thisObj = this;
    $.each(this.listOfDots, function (index, value) {
        thisObj.coords.push(value.getLatLng());
    });
    this.polygonObj = new google.maps.Polygon({
        paths: this.coords,
        strokeColor: "#3333FF",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#3333FF",
        fillOpacity: 0.35,
        map: this.map
    });
    this.remove = function () {
        this.info.remove();
        this.polygonObj.setMap(null);
    }
    this.getContent = function () {
        return this.des;
    }
    this.getPolygonObj = function () {
        return this.polygonObj;
    }
    this.getListOfDots = function () {
        return this.listOfDots;
    }
    this.getPlots = function () {
        return this.polygonObj.getPaths();
    }
    this.getColor = function () {
        return this.getPolygonObj().fillColor;
    }
    this.setColor = function (color) {
        return this.getPolygonObj().setOptions({
            fillColor: color,
            strokeColor: color,
            strokeWeight: 2
        });
    }
    this.info = new Info(this, this.map);
    this.addListener = function () {
        var info = this.info;
        var thisPolygon = this.polygonObj;
        //google.maps.event.addListener(thisPolygon, 'rightclick', function (event) {
          //  info.show(event.latLng);
        //});
    }
    this.addListener();
}

function Info(polygon, map) {
    this.parent = polygon;
    this.map = map;
    this.color = document.createElement('input');
    this.button = document.createElement('input');
    $(this.button).attr('type', 'button');
    $(this.button).val("Change Color");
    var thisOjb = this;
    this.changeColor = function () {
        thisOjb.parent.setColor($(thisOjb.color).val());
    }
    this.getContent = function () {
        var content = document.createElement('div');
        $(this.color).val(this.parent.getColor());
        //$(this.button).click(function () {
          //  thisObj.changeColor();
       // });
        $(content).append(this.color);
        $(content).append(this.button);
        return content;
    }
    thisObj = this;
    this.infoWidObj = new google.maps.InfoWindow({
        content: thisObj.getContent()
    });
    this.show = function (latLng) {
        this.infoWidObj.setPosition(latLng);
        this.infoWidObj.open(this.map);
    }
    this.remove = function () {
        this.infoWidObj.close();
    }
}

Fixed