[GIS] How to associate function to custom controls in google maps api

google mapsgoogle-maps-apihtmljavascript

In the following code I've added a custom control on a map using Google Maps API V3.

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {

      var myOptions = {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644},
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      //### Add a button on Google Maps ...
      var controlMarkerUI = document.createElement('DIV');
      controlMarkerUI.style.cursor = 'pointer';
      controlMarkerUI.style.backgroundColor = 'blue';
      controlMarkerUI.style.height = '28px';
      controlMarkerUI.style.width = '25px';
      controlMarkerUI.style.top = '11px';
      controlMarkerUI.style.left = '120px';
      controlMarkerUI.title = 'Click to get the coordinates';

   map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlMarkerUI);

}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_KEY_HERE>&callback=initMap"
    async defer></script>
  </body>
</html>

Now I'd like to associate a function at the custom control tha simply return the click coordinates when a user click on the map.

I can do it (without associate the function to the customcontrol … ), in this manner

  google.maps.event.addListener(map, 'click', function (e) {
                  alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
              });

but I'd like to activate / deactivate this function clicking on my custom control.

Suggestions / examples?

Best Answer

If you want the same behavior (a message box when you click), your control would contain the command to add or remove the listener, which has to be a named function now. Also don't forget to record the state of the listener so the same control can be used to set or unset the listener. 

 <script>
      var listener_state = 0;

      //Enable-Disable the functionality
      function showHide_XY(e){
        if (listener_state == 0) {
           google.maps.event.addListener(map, 'click', alert_XY);
           listener_state = 1;
        } else {
             google.maps.event.removeEventListener(map, 'click', alert_XY);
            listener_state = 0;
        }
       }

      function alert_XY(e){
         alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
       }


      var map;
      function initMap() {
           //...

       // Setup the control listener
       controlMarkerUI.addEventListener('click', showHide_XY);


       }

</script>
Related Question