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

24👍

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>);
👤poo

5👍

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(); });

0👍

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

Leave a comment