title: Use Google Maps API to display Street View of a house based on an address
body: <p>I am trying to use Google Maps to display a streetview of a house based on an address.  I have created a <a href="http://jsfiddle.net/danielattard/R59mB/" rel="nofollow">jsfiddle</a> based on this <a href="http://www.jaycodesign.co.nz/js/using-google-maps-to-show-a-streetview-of-a-house-based-on-an-address/" rel="nofollow">tutorial</a>.  The fiddle is working to display the default, initial address, but I cannot figure out how to pass the new address into the street view code when the button is pressed.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;h3&gt;Enter an Address to view the street view&lt;/h3&gt;
  &lt;form action="/" method="POST"&gt;
      &lt;textarea name='new_address' class="address"&gt;150 Glen Road, Toronto&lt;/textarea&gt;
      &lt;input type="submit" id="change_street" value="Change Street View Address" /&gt;
  &lt;/form&gt;
  &lt;div class="map_container"&gt;
      &lt;div id="map_canvas_cont"&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="pano_cont"&gt;
          &lt;div id="pano"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the javascript:</p>
  
  <pre><code>var panorama;
  var addLatLng;
  var showPanoData;
  var panorama;
  
  function load_map_and_street_view_from_address(address) {              
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
          'address': address
      }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              var gps = results[0].geometry.location;
              create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
          }
      });
  }
  
  function create_map_and_streetview(lat, lng, map_id, street_view_id) {
  
      panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
      addLatLng = new google.maps.LatLng(lat, lng);
      var service = new google.maps.StreetViewService();
      service.getPanoramaByLocation(addLatLng, 50, showPanoData);
  
      var myOptions = {
          zoom: 14,
          center: addLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          backgroundColor: 'transparent',
          streetViewControl: false,
          keyboardShortcuts: false
      }
  
      var map = new google.maps.Map(document.getElementById(map_id), myOptions);
      var marker = new google.maps.Marker({
          map: map,
          animation: google.maps.Animation.DROP,
          position: addLatLng
      });
  
  }
  
  function showPanoData(panoData, status) {
      if (status != google.maps.StreetViewStatus.OK) {
          $('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
          return;
      }
      var angle = computeAngle(addLatLng, panoData.location.latLng);
  
      var panoOptions = {
          position: addLatLng,
          addressControl: false,
          linksControl: false,
          panControl: false,
          zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL
          },
          pov: {
              heading: angle,
              pitch: 10,
              zoom: 1
          },
          enableCloseButton: false,
          visible: true
      };
  
      panorama.setOptions(panoOptions);
  }
  
  function computeAngle(endLatLng, startLatLng) {
      var DEGREE_PER_RADIAN = 57.2957795;
      var RADIAN_PER_DEGREE = 0.017453;
  
      var dlat = endLatLng.lat() - startLatLng.lat();
      var dlng = endLatLng.lng() - startLatLng.lng();
      var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat) * DEGREE_PER_RADIAN;
      return wrapAngle(yaw);
  }
  
  function wrapAngle(angle) {
      if (angle &gt;= 360) {
          angle -= 360;
      } else if (angle &lt; 0) {
          angle += 360;
      }
      return angle;
  }
  
  $(document).ready(function () {
      load_map_and_street_view_from_address("150 Glen Road, Toronto");
  
      $('#change_street').click(function () {
         alert("How do I pass the new address to the street view code?");
      });
  
  });
  </code></pre>
  
  <p>Can someone please explain to me how to fix this <a href="http://jsfiddle.net/danielattard/R59mB/" rel="nofollow">jsfiddle</a> so that I can pass a new address with the button press?  Thank you.</p>