Add user defined place in the input field by clicking a button to stop the geocomplete

Question

My requirement is to put in a place name in a text field and show that in the map, so i used geocomplete js, which works well.

Now my user should be able to put in user defined places like 'my house', for that I need to remove the geocomplete on clicking a 'x' button on top of the map.

How can I implement this?

Thanks in advance

Answer 1

I wouldn't customize the package! When a new version comes out, you'll have to make the same changes you before.

Since you haven't provided any code, I can give you an idea of what I've done with JQuery validation method overrides.

You'll simply have to find the listener (something like $('#listenToThis').on('click', function(){ doThings(); }) in the geocomplete.js file, then override it in a file that is included after geocomplete.

If you're using bundles, just include your file after the geocomplete listener response is defined.

So, after you find those, you can do something similar to the following:

$.validator.methods.number = function (value, element) {
    value = floatValue(value);
    return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}

The function above allowed me to validate client-side numbers that were formatted as currency in JQuery ($).

This overrides the JQuery.validator.methods.number function (a cheating way to override the function without changing the package code), so if you can pinpoint the geocomplete.addSomethingToMap or geocomplete.reactToClick function, you should override it and it will essentially work that way.

Warning, though: you will need to reinclude the changes when you want to reenable the feature. You'll have to override, override, override again. This may not be the best way if they're going to be adding hundreds of different new locations on one screen, but for up to a small unit, such as a dozen, it should be a good solution.