110 likes | 238 Views
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:
E N D
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?sensor=false&size=400x250&markers=3100+Broadway+New+York,NY • http://maps.google.com/maps/api/staticmap?sensor=false&size=400x250&zoom=4&markers=3100+Broadway+New+York,NY • http://maps.google.com/maps/api/staticmap?sensor=false&size=500x350&markers=color:green|100+Wall+Street+NY&markers=color:red|100+Main+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.