Advanced Interactive Web Mapping, Programming, and Design

In-class Excercises: More APIs, Leaflet

Part 1: Streetview image API

  1. 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
  2. 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.
  3. Add an img tag to the HTML. In the body on the line after the map div is a good place. For now it won't have a src attribute, so leave it out. Give it a class (for example, streetview) so you can style it and reference it in your JavaScript.
  4. 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:
    .streetview {
      position: absolute;
      bottom: 10px;
      left: 10px;
      width: 200px;
      height: 200px;
      z-index: 5000;
    (Update the class name as necessary.)
  5. 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's src attribute to it using jQuery's attr().