let map;

​

async function initMap() {

    // instantiate the libraries

    const {Marker} = await google.maps.importLibrary("marker");

    const { event } = await google.maps.importLibrary("core");

  const { Map } = await google.maps.importLibrary("maps");

    // instantiate the map

  map = new Map(document.getElementById("map"), {

    center: { lat: -34.397, lng: 150.644 },

    zoom: 8,

  });

    // instantiate the marker

    marker = new Marker({

        map,

        draggable: true,

        position: {lat: -34.397, lng: 150.644},

    })

    // This adds a click event listener to your marker 

    let markerListenerEvent = event.addListener(marker, "click", function() {

        alert("you have clicked the marker!")

    });

    // this will show in the console that 

    // the marker now have a click event listener.

    console.log("clickable marker: ");

    console.log(marker.__e3_.click[64].So);

    // this will return "true"

  // clicking on the map will then remove the listener you put

    // on the marker

    let mapListenerEvent = event.addListener(map, "click", function() {

        alert("You have now removed the marker event listener!")

        // This is the the method that removes the listener for marker above

        event.removeListener(markerListenerEvent);

        // this will show in the console that 

        // the marker now don't have a click event listener

        // since the "click" object will now be empty.

        console.log("not clickable marker: ");

        console.log(marker.__e3_.click);

        // this will return an empty object

    })

​

}

​

​

initMap();