title: Google MAP API V3 - Street View
body: <p>I am trying to integrate the Google maps V3 API into our website. I need to read the address and set it to the MAP API so that map will show the street view for that address.</p>
  <p>So I need help in 3 points.</p>
  <ol>
  <li><p>How to read the address values.</p>
  <p>Example: <code>var streetAddressArray = getElementsByAttribute(parent.document.forms[0], &quot;*&quot;, &quot;smokeid&quot;, &quot;Address Line 1&quot;);</code> (I am not sure what this function will do, just pasting to give an idea on what exactly I am looking for.)</p>
  </li>
  <li><p>After reading the value set to the API classes/methods so that map can show the street view.</p>
  </li>
  <li><p>Show it as a street view.</p>
  </li>
  </ol>
  <p>This is similar to what I am looking for:</p>
  <ul>
  <li><a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/streetview-simple" rel="nofollow noreferrer">https://google-developers.appspot.com/maps/documentation/javascript/examples/streetview-simple</a></li>
  </ul>
  <hr />
  <p>I am very thankful for your response Suvi!
  Here is my Program:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot; /&gt;
  &lt;style type=&quot;text/css&quot;&gt;      html { height: 100% }      body { height: 100%; margin: 0; padding: 0 }      #map_canvas { height: 100% }    &lt;/style&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.googleapis.com/maps/api/js?key=KEY_VALUE &amp;sensor=true&quot;&gt;
  &lt;/script&gt;    
  &lt;script type=&quot;text/javascript&quot;&gt;     
    function initialize() {  
      
     var fenway = new google.maps.LatLng(42.345573,-71.098326);
     var mapOptions = {
       center: fenway,
       zoom: 14,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     var map = new google.maps.Map(
     document.getElementById(&quot;map_canvas&quot;), mapOptions);
     var panoramaOptions = {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10,
          zoom: 1
        }
      };
      var panorama = new  google.maps.StreetViewPanorama(document.getElementById(&quot;pano&quot;),panoramaOptions);
     map.setStreetView(panorama);
                  
    }    
  &lt;/script&gt; 
  &lt;/head&gt;  
  &lt;body onload=&quot;initialize()&quot;&gt; 
  &lt;div id=&quot;map_canvas&quot; style=&quot;width:100%; height:100%&quot;&gt;
  &lt;div id=&quot;pano&quot; style=&quot;position:absolute; left:410px; top: 8px; width: 400px; height: 300px;&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I am facing two issues with this,</p>
  <ol>
  <li>Somehow I am not able to view Panorama view. Any issue with my code?</li>
  <li>Address for map should come from bunch input fields( address line 1 and City and Zip etc). How can I assign the input fields address to the map so that map will show directly that particular location?</li>
  </ol>
  <p>I am using a custom product. I have another example in that they are using:</p>
  <pre><code>var streetAddressArray = getElementsByAttribute(parent.document.forms[0], &quot;*&quot;, &quot;smokeid&quot;, &quot;LossLocation_Address1&quot;);
  </code></pre>
  <hr />
  <p>I guess I am little closer to the target, But my this example is not working, it not rendering anything.</p>
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;  &lt;head&gt;    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot; /&gt;    &lt;style type=&quot;text/css&quot;&gt;      html { height: 100% }      body { height: 100%; margin: 0; padding: 0 }      #map_canvas { height: 100% }    &lt;/style&gt;    &lt;script type=&quot;text/javascript&quot;    
    src=&quot;http://maps.googleapis.com/maps/api/js?key=AIzaSyBweQln0Jf5uBWvkTGSkv8AfkBdt-zZ3dE&amp;sensor=true&quot;&gt;    &lt;/script&gt;    
  &lt;script type=&quot;text/javascript&quot;&gt;     
    
    &lt;!-- --&gt;
    
    var geocoder;  
    var map;
    function initialize() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {      zoom: 8,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    }
      map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions);
      } 
    function codeAddress() {
      var address = document.getElementById(&quot;address&quot;).value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
         } 
          else 
         {
          alert(&quot;Geocode was not successful for the following reason: &quot; + status);
         }   
        });
       }
   &lt;body onload=&quot;initialize()&quot;&gt;
   &lt;div id=&quot;map_canvas&quot; style=&quot;width: 320px; height: 480px;&quot;&gt;
   &lt;/div&gt;  
  &lt;div&gt; 
     &lt;input id=&quot;address&quot; type=&quot;textbox&quot; value=&quot;Sydney, NSW&quot;&gt;
     &lt;input type=&quot;button&quot; value=&quot;Encode&quot; onclick=&quot;codeAddress()&quot;&gt;
  &lt;/div&gt;
  &lt;/body&gt;
    &lt;!-- --&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Can you help me what went wrong?</p>