In-class Excercises: More APIs, Leaflet
Part 1: Streetview image API
- Using Google's Street View Image API, attempt to load an image in your browser. If you need a latitude and longitude to start with, try the ISC Building (where we meet):
40.691694, -73.965046
- Continue with your code from Part 3 from last week or this jsbin, and we'll add a streetview image of the top search result using the Street View Image API.
- Add an
img
tag to the HTML. In thebody
on the line after the mapdiv
is a good place. For now it won't have asrc
attribute, so leave it out. Give it a class (for example,streetview
) so you can style it and reference it in your JavaScript. - Add some CSS to make the image show up on top of the map. This will make it appear in the bottom left of the map:
(Update the class name as necessary.).streetview { position: absolute; bottom: 10px; left: 10px; width: 200px; height: 200px; z-index: 5000; }
-
Now in your
done
callback (where you display the results), create an image url with the first result's latitude and longitude using the Street View Image API and set your image'ssrc
attribute to it using jQuery'sattr()
.