CODEWITHSUNDEEP
javascriptdjangogoogle-places-apigoogle-places-autocomplete
Dev Kansara
Dev Kansara

Reputation: 261

google.maps.event.addDomListener() is deprecated, use the standard addEventListener() method instead : Google Place autocomplete Error

I am trying to add Google place auto suggest, I copied the code from the developer's website to try it out but got the error : google.maps.event.addDomListener() is deprecated, use the standard addEventListener() method instead. Also I am not getting any place suggestions.

https://developers.google.com/maps/documentation/javascript/places-autocomplete

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

i have also added script <script src="https://maps.googleapis.com/maps/api/jskey=api_key&libraries=places"></script>

I have implemented the same thing in one html it worked successfully, but when I used it on click button which opens a popup (form which has place-input), it gave me this error.

Note : I have also tried addEventListener but that's giving me an error : google.maps.event.addEventListener is not a function

Do you have any idea why I am getting this error, and how can I fix this?

Upvotes: 22

Views: 22929

Answers (4)

Shub
Shub

Reputation: 468

markerclusterer.js

  1. previous code
google.maps.event.addDomListener(this.div_, 'click', function(event) {
    // Only perform click when not preceded by a drag
    if (!isDragging) {
        that.triggerClusterClick(event);
    }
});

google.maps.event.addDomListener(this.div_, 'mousedown', function() {
    isDragging = false;
});

google.maps.event.addDomListener(this.div_, 'mousemove', function() {
    isDragging = true;
});
  1. new code
  this.div_.addEventListener('click', function(event) {
    // Only perform click when not preceded by a drag
    if (!isDragging) {
      that.triggerClusterClick(event);
    }
  });
  this.div_.addEventListener('mousedown', function() {
    isDragging = false;
  });
  this.div_.addEventListener('mousemove', function() {
    isDragging = true;
  });

Upvotes: 1

Andrew Murphy
Andrew Murphy

Reputation: 1435

This in the Google Maps Issue Tracker marked as fixed. The fix should be a forthcoming release.

Upvotes: 0

Christian Žagarskas
Christian Žagarskas

Reputation: 1237

This is not as easy as just "Replace addDomListener" with copy/paste. lol. that would be nice, right?

It should also be noted that when you LOAD the Google Maps API you can just pass your initializeAutocomplete function via the URL like so:

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&libraries=places&callback=initAutocomplete'></script>

So, its as easy as tacking a callback GET var onto this url: https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initAutocomplete

in your example just add &callback=initAutocomplete = done.

full stop

Lets examine other cases - consider the following usage. This (from the old google maps example archive) is not going to work anymore: enter image description here

 google.maps.event.addDomListener( radioButton, 'click', function() { 
    autocomplete.setTypes( ['establishment'] ); 
  // this causes google.maps.event.addDomListener() is deprecated warning
 });

This will never work Because there is no google.maps.event.addEventListener

 google.maps.event.addEventListener( radioButton, 'click', function() { 
    autocomplete.setTypes( ['establishment'] ); 
   });

// lands you: Uncaught TypeError: google.maps.event.addEventListener is not a function

You need to rethink+rewrite as follows:

document.getElementById(radioButton).addEventListener('click', function(e) {
    autocomplete.setTypes( ['establishment'] ); // yellowstone PARK
    autocomplete.setTypes( ['address'] ); // some address with yellowstone st
    });

now this works as expected once again with no google.maps.event.addDomListener() is deprecated error enter image description here

So in your case if you can not add &callback=initAutocomplete onto your URL for some reason or do not want to - then consider this:

// notworksolutions
google.maps.event.addDomListener(window, 'load', initializeAutocomplete);
google.maps.event.addEventListener(window, 'load', initializeAutocomplete);

// solution that work
window.addEventListener('load', (event) => { initializeAutocomplete(); });

Upvotes: 6

poo
poo

Reputation: 1240

As addDomListener() is deprecated, use the standard addEventListener() method instead, you can do so as follows:

window.addEventListener('load', initializeAutocomplete)

Replace in a similar fashion at all the required places.

google.maps.event.addDomListener(<OBJECT>,<EVENT>,<FUNCTION>);

to

<OBJECT>.addEventListener(<EVENT>,<FUNCTION>);

Upvotes: 29

Related Questions