LeapMotion and GoogleMaps


Let’s try to use Google Maps with LeapMotion, the popular hand input controller.
Once I received LeapMotion, I started developing some ideas in my mind: one of them, it’s controlling GoogleMaps by using a desired hand.

First of all we need the Leap javascript library, at this time you can download it at the following link .

Once downloaded and included in our page, we have to load the LeapMotion engine:


Row #1: we are creating a new Leap.Controller setting the enableGestures parameter to true because this will allow us to access to the LeapMotion and being informed about Gestures handled by the SDK.

The other rows are pretty clear themselves, they are listening to events, if we connect or disconnect to/from a Leap controller (if any available), and the last event it’s listening to the “on frame” event, triggered when Leap fires a motion state change.

After that, we initialize GoogleMaps importing the script:


Now we have GoogleMaps and LeapMotion correctly initialized, what now?

We want that by moving the hand we will be able to pan the map in the right direction, while showing ONE or TWO fingers the map will change the Map Mode ( Terrain, Satellite).


You can find the entire project at the following link on GitHub

Francesco Vitullo

I'm a passionate developer!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>