Google Maps in Max

Draw points in Max by sending latitude and longitude to a Web client via Osc and web sockets.

Uses Ruby, WebSockets, Chrome, Google Maps API, Osc, Max, Jquery, and Node.js… But the Max patch is actually quite simple.

Based on this geocoding tutorial:  http://www.sitepoint.com/google-maps-api-jquery/

download

https://github.com/tkzic/internet-sensors

folder: google-maps

files

main Max patch
  • googlemaptest.maxpat
html and javascript for Google API
  • js/ (folder containing javascript code for map client)
  • markers.html (web client)
ruby
  • mapserver.rb (Osc and Websockets server)
node.js (optional)
  • nodeserver.js (local node.js webserver)

running node.js local web server (optional)

To run the project locally, you will either need to install node.js or have a local web server. The instructions assume that you have installed node, as well as the http package.

If you don’t want to bother with node, there is also an online version of the web client running at  http://zerokidz.com/gmap/markers/markers.html

intalling ruby gems

Running Ruby 2.0 as well as the following gems:

  • osc-ruby
  • em-websocket
  • json

instructions

1. If you are using the online Web client, go to this URL in a Google Chrome browser: http://zerokidz.com/gmap/markers/markers.html then skip to step 4.

2. In a terminal window start the node webserver

node nodeserver

3. Launch a Google Chrome web browser and type in this URL

127.0.0.1:8081/markers.html

4. In another terminal window start the ruby server for Osc and websockets

ruby mapserver.rb

5. Now in the Web Client (Chrome) press the “OSC” button underneath the map – to open the web sockets connection with the ruby server.

6. Open the Max patch:

googlemaptest.maxpat

7. Now you should be able to click on the message boxes for Bethel and Rumford in the Max patch to add location markers to the map in the browser.

 

Google oauth 2.0 authorization for devices

What this means: You create an app on a device which doesn’t have a browser. For example, an Arduino, an appliance, or a game console. This procedure shows how to authorize that device to access a user’s account for Google, Twitter, Facebook, etc.,

See this URL for Google instructions: https://developers.google.com/accounts/docs/OAuth2ForDevices

Notes and Google examples (using curl from a command line):

Here is an oauth 2.0 google request for a user code – The client id is obtained using instructions found at the link above.

curl -d "client_id=104588205543369.apps.googleusercontent.com&scope=https://www.googleapis.com/auth/userinfo.email  https://www.googleapis.com/auth/userinfo.profile" https://accounts.google.com/o/oauth2/device/code

Which returned this JSON response:

{
  "device_code" : "4/Gujc7GxpGFSHNlphxVZCK_y10yS6Kq",
  "user_code" : "ibaz70ej9",
  "verification_url" : "http://www.google.com/device",
  "expires_in" : 1800,
  "interval" : 5
}

Then you go to the URL in the response, enter the user code, and follow instructions…

Then from the device you do this…

curl -d "client_id=1045882053369.apps.googleusercontent.com&client_secret=zDP5UVwbqcYzv7rnVieKxnOV&code=4/Gujc7GxpGHNlphxVZCK_y10yS6Kq&grant_type=http://oauth.net/grant_type/device/1.0" https://accounts.google.com/o/oauth2/token

Which returns this response:

{
  "access_token" : "ya29.AHES6ZE2QxqzZyWkGu20lJljEIHYTf08VtggyRF73428w0LQ7lzFP_uw",
  "token_type" : "Bearer",
  "expires_in" : 3600,
  "id_token" : "eyJhbGciOiJSUzI1NiIsImtpZCI6ImJhZGQ4NWFhMmRlZmZkMWFkZWJkNzc2NTgxNWMzZmVjZTM0MmIzNGEifQ.eyJpc3MiOiJhY2NvdW50cy5nb29nbGUuY29tIiwiaWQiOiIxMTExNzg0MjgyNzI3MDgxMTI0NTMiLCJhdWQiOiIxMDQ1ODgyMDUzMzY5LmFwcHMuZ2df9vZ2xldXNlcmNvbnRlbnQuY29tIiwiY2lkIjoiMTA0NTg4MjA1MzM2OS5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsInZlcmlmaWVkX2VtYWlsIjoidHJ1ZSIsInRva2VuX2hhc2gefiOiJvVG9OdS0tYU1DUGhYbUI1S3p4TTN3IiwiZW1haWwiOiJ6aWNhcmVsdEBnb3VsZGFjYWRlbXkub3JnIiwiaGQiOiJnb3VsZGFjYWRlbXkub3JnIiwiaWF0IjoxMzU2MjQ2Mjg2LCJleHAiOjEzNTYyNTAxODZ9.DqIqLtg9m6wlHh5YSFFgXIOgbMW0E2mKR2FdY7PWtNJrt91moqVBe7dQxQPNalQMKhYTapJdVk2MB1oRl7zXEnLIe_VjI3BUwzTKqaG_sS9oRyh14_yqDWeMFru5d7OFUm1Ulwb2lLdWWwtttEVyJiw94oBdR0tuWg0MNkEOkXU",
  "refresh_token" : "1/NuEmigydABgeRwZaRCZbZZckJ-EJFZd8C1YZLURut8s"
}

Now your device can use the access token query string method…

curl https://www.googleapis.com/oauth2/v1/userinfo?access_token=ya29.AHES6ZQxqzZyWkGu20lJljEIHYTf08VtggyRF73428w0LQ7lzFP_uw

Here is the response:

{
 "id": "1111784282727081812453",
 "email": "[email protected]",
 "verified_email": true,
 "name": "Tony Tiger",
 "given_name": "Tony",
 "family_name": "Tiger",
 "hd": "looney.org"
}

Or you can use the http header option…

curl -H "Authorization: Bearer ya29.AHKKES6ZQxqzZyWkGu20lJljEIHYTf08VtggyRF73428w0LQ7lzFP_uw" https://www.googleapis.com/oauth2/v1/user info

which should return the exact same response.

[Also see] tkzic/max teaching examples/google-oauth2.0-readme.txt