title: Google Maps API v3: Control the direction of a street view and use address instead of lat/lon
body: <p>I am learning google maps API v3. I was able to put together this code. I tried to make it as simple as possible. It works...</p>
  
  <p>The problem I am having is that the street view map is NOT pointing to the right direction/address. The right building is the yellow one on the corner (You'll need to scroll the street view to the left a few times). </p>
  
  <p>When I use the very same cords in <a href="http://maps.google.com/maps?q=34.028339,%20-118.2881768&amp;layer=c&amp;z=17&amp;iwloc=A&amp;sll=34.028340,-118.288177&amp;cbp=13,124.9,0,0,0&amp;cbll=34.028358,-118.288208&amp;hl=en&amp;gl=us&amp;ved=0CAsQ2wU&amp;sa=X&amp;ei=Gqe-T9uNIcaniALWh7y1Bw" rel="nofollow" title="google maps">google maps</a>, it points to the right building/address. My map's StreetView points to the opposite side/building.</p>
  
  <ul>
  <li>Is there a way to control the direction a streetView map will point to, within the given cords? -North/South/West...etc.</li>
  <li><strong>Also, is it possible to just use an
  address, and have google api figure the latLong?</strong> -It's not efficient to figure out and find the right coords for over 300 addresses and increasing >_&lt;</li>
  </ul>
  
  <p>My code uses LatLon stored in a mysql database, but for this exmaple, I am using a single point to make my case:</p>
  
  <p><strong>Google Map's code: street_view.js</strong></p>
  
  <pre><code>//&lt;![CDATA[
  // ************************   Variables   ************************
  var infoWindow = new google.maps.InfoWindow();
  
  //Map Options
  var options = {
      lat: 34.028339,
      lon: -118.2881768,
      zoom: 15,
      type: 'roadmap',
      tytle: "Address: 1256 W. 29th St. Los Angeles, CA  90007",
      html: '&lt;div class="tooltip"&gt;&lt;span&gt;Address&lt;/span&gt;: 1256 W. 29th St. Los Angeles, CA  90007&lt;\/div&gt;',
      icons: {
          red:  'http://labs.google.com/ridefinder/images/mm_20_red.png',
          blue: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
          shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
          }
      };
  
  
  
  // ************************   Functions   ************************
  function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
          //marker.openInfoWindowHtml(html);
          infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
      });
  }
  
  
  function googleMaps()
  {
      var map = new google.maps.Map(document.getElementById("map"), { 
          center: new google.maps.LatLng( options.lat , options.lon ),
          zoom: options.zoom,
          mapTypeId: options.type
      });
  
      var marker = new google.maps.Marker({
          map: map,
          position: map.getCenter(),
          title: options.title,
          icon: options.icons.blue,
          shadow: options.icons.shadow
          });
  
      bindInfoWindow(marker, map, infoWindow, options.html);
  
  
      map.StreetView = new  google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), {
          position: map.getCenter(),
          zoom: 1
      });
      //map.setStreetView(map.StreetView); //This line adds a street view icon to the roadmap and binds it together with streetView
  
  
  } //end of load()
  
  
  // ************************   Load   ************************
  //Call googleMaps after document is loaded
  google.maps.event.addDomListener(window, 'load', function(){
      googleMaps();
      //you can add more code here
      });
  //]]&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
      &lt;title&gt;&lt;?php echo $map['address']?&gt;&lt;/title&gt;
  
      &lt;!-- START: Google Maps API --&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.mydomain.com/_api/google/maps/v3/street_view.js"&gt;&lt;/script&gt;
      &lt;!-- __END: Google Maps API --&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;div id="map-container" &gt;
          &lt;div id="map_StreetView" style="width: 350px; height: 250px"&gt;&lt;/div&gt;&lt;br/&gt;
          &lt;div id="map" style="width: 350px; height: 250px"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>PS. I tried to give you a jsFiddle, but for whatever reason it is not showing a map...? <a href="http://jsfiddle.net/EdsB6/" rel="nofollow">http://jsfiddle.net/EdsB6/</a></p>