CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
Cesare
Cesare

Reputation: 1749

How to associate function to custom controls in google maps api?

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?

Upvotes: 1

Views: 629

Answers (2)

Cesare
Cesare

Reputation: 1749

Merging @Murali answer and this answer https://gis.stackexchange.com/questions/244132/how-to-associate-function-to-custom-controls-in-google-maps-api/244141#244141, 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>

Upvotes: 1

Murali
Murali

Reputation: 409

<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: 70%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="map"></div>
<button id="start">Start</button>
<button id="clearClick">Clear</button>
<script>
  var map;
  var listener1;



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

    listener1= google.maps.event.addListener(map, 'click', function

      (e) {
      alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
    });
    document.getElementById("clearClick").onclick = function(){
      google.maps.event.removeListener(listener1);
    }
    document.getElementById("start").onclick = function(){
      listener1= google.maps.event.addListener(map, 'click', function

        (e) {
        alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
      });
    }
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlMarkerUI);

  }

</script>

<script>

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

For further ref below link

https://developers.google.com/maps/documentation/javascript/events

Upvotes: 2

Related Questions