I use GoogleMap v3 AutoComplete and I need to pletely remove it and unbind all event listeners. My code for initializing and binding to events looks like the following:

var autoplete = new google.maps.places.Autoplete($("input").get(0), {
   types: ["geocode"]
});

google.maps.event.addListener(autoplete, 'place_changed', function () {
  // handle events
});

I don't find official way to correctly remove autoplete and unbind all events. Please point me the right way.

Thanks.

I use GoogleMap v3 AutoComplete and I need to pletely remove it and unbind all event listeners. My code for initializing and binding to events looks like the following:

var autoplete = new google.maps.places.Autoplete($("input").get(0), {
   types: ["geocode"]
});

google.maps.event.addListener(autoplete, 'place_changed', function () {
  // handle events
});

I don't find official way to correctly remove autoplete and unbind all events. Please point me the right way.

Thanks.

• javascript
• google-maps
• google-maps-api-3
• google-maps-api-2

1 Answer 1

For the unbinding of events use google.maps.event.clearInstanceListeners.

For removing of the autoplete-functionality there is no implemented method. You may create a clone of the input before you create the Automplete and when you want to remove the autoplete-functionality replace the current input with the clone.

//--------------------------------------------------------------
      //this overides the built-in Autoplete and adds a remove-listener
      //execute it once when the API has been loaded
     (function(ac) {
         google.maps.places.Autoplete = function(node, opts) {
           var clone = node.cloneNode(true),
             pac = new ac(node, opts);

           google.maps.event
             .addListener(pac,
               'remove',
               function(restore) {
                   google.maps.event.clearInstanceListeners(pac);
                   google.maps.event.trigger(node,'blur');
                   google.maps.event.clearInstanceListeners(node);
                 if (restore===true) {
                   node.parentNode.replaceChild(clone, node);
                 } else {
                   node.parentNode.removeChild(node)
                 }
               });
           return pac;

         }
       }
       (google.maps.places.Autoplete));
//-------------------------------------------------------------------------- 

     function initialize() {

       autoplete = new google.maps.places
         .Autoplete(document.getElementsByTagName('INPUT')[0], {
           types: ["geocode"]
         });
     }

     google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis./maps/api/js?v=3&libraries=places&.js"></script>
<input/>
<span>
  <input  type="button"  value="remove input" 
          onclick="google.maps.event.trigger(window.autoplete,'remove');
                   this.parentNode.parentNode.removeChild(this.parentNode);"/>
  <input  type="button"  value="remove autoplete-functionality" 
          onclick="google.maps.event.trigger(window.autoplete,'remove',true);
                   this.parentNode.parentNode.removeChild(this.parentNode);"/>
<span>

The script adds a remove-listener to Automplete's. The listener accepts a single argument. Set it to true when you only want to remove the autoplete-functionality. Otherwise the input will be removed pletely.