Trying to convert Address to Lat Long and display Street View: Div is greyed out

Question

I used code from this Stack Overflow Thread, thank you very much. And I used the Streetview code from Google Javascript Maps API below that. However, I get nothing back. The alert(latitude) works and alert(longitude) works. But down below when I try to display the Street View it says, "Uncaught ReferenceError: latitude is not defined". I tried pasting the values returned in the alerts into the StreetView code and then the DIV turned grey. Stumped I am.

   <div id="map" style="border-width:medium;border-style:solid; border-color:Red;width:200px;height:150px;"></div>


   <script type="text/javascript">

   function initMap(){

       var geocoder = new google.maps.Geocoder();
       var address = "new york";

       geocoder.geocode({ 'address': address }, function (results, status) {

           if (status == google.maps.GeocoderStatus.OK) {
               var latitude = results[0].geometry.location.lat();
               var longitude = results[0].geometry.location.lng();
               alert(latitude);
               alert(longitude);
           }
       }); 

       var panorama;          
      panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'),
      {
          position: { lat: latitude, lng: longitude },
          pov: { heading: 165, pitch: 0 },
          zoom: 1
      });
 }


</script>

Answer 1

Apparently there is no streetview data at 40.712784,-74.005941 (the result for geocoding "new york"). If I change that to "times square, new york" (and put the creation of the panorama inside the geocoder callback function) I get a panorama (at 40.759011,-73.984472).

working fiddle

code snippet:

function initMap() {

  var geocoder = new google.maps.Geocoder();
  var address = "times square, new york"; // "new york"; // 

  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      document.getElementById('coord').innerHTML += results[0].geometry.location.toUrlValue(6) + "</br>";
      var panorama;
      panorama = new google.maps.StreetViewPanorama(
        document.getElementById('map'), {
          position: results[0].geometry.location,
          pov: {
            heading: 165,
            pitch: 0
          },
          zoom: 1,
          visible: true
        });
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="coord"></div>
<div id="map" style="border-width:medium;border-style:solid; border-color:Red;width:400px;height:300px;"></div>