CODEWITHSUNDEEP
google-maps-api-3mouseevent
user388554
user388554

Reputation: 21

Google maps -- detect metaKey status during click event?

I am developing for Google Maps using the javascript API. I would like to know whether the Command key (on a Mac) was depressed during a mouse click. It seems, however, that I do not have access to such information:

https://developers.google.com/maps/documentation/javascript/reference#MouseEvent

Is there any way around this?

Upvotes: 2

Views: 897

Answers (1)

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

I think it's possible with a hack: I don't have a Mac so I can't test. All I did was replace ctrlKey with metaKey. There is a bug I can't get around in JSFiddle, the first click or meta+click will always register as regular click. It works fine outside of JSFiddle.

Meta-click should print the latLng. Please try it:

http://jsfiddle.net/ThraL/5/

Windows version (ctrl)

http://jsfiddle.net/ThraL/4/

(looks like you can write metaKey || ctrlKey but since I can't test I'll leave them separate).

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

      var metadown;
      var clicks = 0;

      $(window).keydown(function(evtobj) {
        if(evtobj.metaKey) { 
          metadown = true;
        } 
        $(window).one("keyup",function(evtobj) {
          metadown = false;
        });
      });

      google.maps.event.addListener(map, 'click', function(event) {
        if(metadown) {
          $("#console").val(event.latLng);
          metadown = false; 
        }
        else {
          $("#console").val("meta not down (" + clicks + ")\n");  
          clicks++;
        }
      });

      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div id="display">
    <textarea id="console" rows="2" cols="30"></textarea>
</div>
    <div id="map_canvas"></div>
  </body>
</html>

Upvotes: 3

Related Questions