Working with APIs
How it works
• You provide a URL which contains a description of the
map you want.
• How do you know how to write this description? Only
by reading Google's documentation for the Static Maps
API
• After perusing the instructions, you learn that Google
wants a URL in this format:
– http://maps.google.com/maps/api/staticmap?sensor=false
&size=550x300&markers=902+Broadway+New+York,NY
• Visit that URL with your browser to see the map
Google draws for you.
What it means
• http://maps.google.com/maps/api/staticmap
– This is the endpoint of the API, the base address of the service.
Think of it as the location of the remote script that will be
reading your input and responding back.
• ?
– This is a delimiter that separates the endpoint from the
parameters that you use to specify the details of your request.
• some_key=some_value
– The parameters you pass in will be in key-value pairs. The key is
the name of the property, such as size. The equals sign = is how
you specify the value (e.g. 300x200) for the key.
• &
– Each parameter key-value pair is delimited by an ampersand
Some Parameters
• sensor=false
– This can either be true or false and indicates whether or
not the browser is keeping track of the user's geo-location.
For our purposes, we leave it to false.
• size=550x300
– This specifies the widthxheight dimensions of the map
image that we would like.
• markers=902+Broadway+New+York,NY
– This specifies the address in which we want the map image
to focus around. The + sign denotes a space character in
the URL (this is true across all Web addresses, not just this
particular API).
Exercise
• Using the Google Statics Map API, what are
the HTTP calls needed to generate the
following maps?
– 400 pixels wide and 250 pixels high
– At a zoom level of 4
– Includes a green marker at 100 Wall Street, NY
and a blue marker at 100 Main St. Queens, NY; has
a zoom level of 9; and is 500x350
Solutions
• http://maps.google.com/maps/api/staticmap?se
nsor=false&size=400x250&markers=3100+Broad
way+New+York,NY
• http://maps.google.com/maps/api/staticmap?se
nsor=false&size=400x250&zoom=4&markers=31
00+Broadway+New+York,NY
• http://maps.google.com/maps/api/staticmap?se
nsor=false&size=500x350&markers=color:green|
100+Wall+Street+NY&markers=color:red|100+M
ain+Street+Queens,NY
Twitter API
• Requires an OAUTH key
• Must have a twitter account
• Must create a twitter app
• Show example
Mashape
• Easiest I have found
• Shared key
– Register once and play with different APIs
– Good for exploration
Mashape Examples
• Google Driving Directions
• Interactive Yoda Speak
Exercise
• Explore Mashape APIs and use one in a Ruby
program.