Removing an Event listener

Question

Ok what im trying to do is add a reset button to the top of my google map. It's so that when you call directions and want to get rid of the current directions or just clear the map and recenter on the starting point here is the event listener im using

  controlUI.addEventListener('click', function() { map.setCenter(pyrmont), map.setZoom(14), directionsDisplay.setPanel(null), directionsDisplay.setMap(null); }); 

and it all works correctly but after pressing the 'reset' button you can no longer do any of the directions and im guessing it is because im calling my two directions var's .setPanel and .setMap and setting them both to null but its not clearing them afterwards and that is the problem would a simple removing event listener work?! If so how would i write it out ive tried several approaches and none of them seem to be working correctly. Any help or or pointers would be extremely helpful.

Thank you in advance,

Travis

Oh and here is the controlUI function that im calling here

 function CenterControl(controlDiv, map) { // Set CSS for the control border. var controlUI = document.createElement('div'); controlUI.style.backgroundColor = '#fff'; controlUI.style.border = '2px solid #fff'; controlUI.style.borderRadius = '3px'; controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; controlUI.style.cursor = 'pointer'; controlUI.style.marginBottom = '22px'; controlUI.style.textAlign = 'center'; controlUI.title = 'Click to reset the map'; controlDiv.appendChild(controlUI); // Set CSS for the control interior. var controlText = document.createElement('div'); controlText.style.color = 'rgb(25,25,25)'; controlText.style.fontFamily = 'Roboto,Arial,sans-serif'; controlText.style.fontSize = '16px'; controlText.style.lineHeight = '38px'; controlText.style.paddingLeft = '5px'; controlText.style.paddingRight = '5px'; controlText.innerHTML = 'Reset Map'; controlUI.appendChild(controlText); // Setup the click event listeners: simply set the map to default. controlUI.addEventListener('click', function() { map.setCenter(pyrmont), map.setZoom(14), directionsDisplay.setPanel(null), directionsDisplay.setMap(null); }); } 

Answer 1

Is there a reason to call null and not just reset the map to what you initially render? I think this SO post will help you.

Google map reset to initial state

Answer 2

Well, answering the title question. To remove an event listener you just do: EventTarget.removeEventListener

Try looking on https://developer.mozilla.org/enUS/docs/Web/API/EventTarget/removeEventListener

I hope this helps.

Answer 3

So I did just flat out recall/recreate the places service and the directions renderer within the reset function itself

 controlUI.addEventListener('click', function() { map.setCenter(pyrmont), map.setZoom(14), directionsDisplay.setMap(null); directionsDisplay.setPanel(null); service = new google.maps.places.PlacesService(map); directionsDisplay = new google.maps.DirectionsRenderer; directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directionsPanel')); directionsService = new google.maps.DirectionsService; }); 

Thanks for the help.