0

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?

1

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>
1

Starting from @JGH answer I solved in this way ....

<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;

      var listenerHandle;

      //Enable-Disable the functionality
      function show_XY(e){
           listenerHandle = google.maps.event.addListener(map, 'click', alert_XY);
       }

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

       function removeListener(e){
          google.maps.event.removeListener(listenerHandle);
        }

      function initMap() {
        var myOptions = {
            zoom: 8,
            center: {lat: -34.397, lng: 150.644},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //### Add a button on Google Maps ...
        var controlEditUI = document.createElement('DIV');
        controlEditUI.id = "controlEditUI";
        controlEditUI.style.cursor = 'pointer';
        controlMarkerUI.style.backgroundColor = 'blue';
        controlEditUI.style.height = '28px';
        controlEditUI.style.width = '25px';
        controlEditUI.style.top = '11px';
        controlEditUI.style.left = '120px';
        controlEditUI.title = 'Click to get the coordinates';
        map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlEditUI);

        controlEditUI.addEventListener('click', show_XY);

        //### Add a button on Google Maps ...
        var controlTrashUI = document.createElement('DIV');
        controlTrashUI.id = 'controlTrashUI';
        controlTrashUI.style.cursor = 'pointer';
        controlMarkerUI.style.backgroundColor = 'black';
        controlTrashUI.style.height = '28px';
        controlTrashUI.style.width = '25px';
        controlTrashUI.style.top = '11px';
        controlTrashUI.style.left = '150px';
        controlTrashUI.title = 'Click to set the map to Home';
        map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlTrashUI);

        controlTrashUI.addEventListener('click', removeListener);

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.