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>

The geocode call is async. Just use a callback (call a method to which you could send those 2 coords) inside geocode's callback and display the street view. Also, your `latitude` and `longitude` variables have isolated scope inside geocode's callback. — Nicolae Olariu, Sep 18 '15 at 05:53

score 0 · Answer 1 · answered Sep 18 '15 at 05:58

Try this instead. I wrote it without being tested but it should give you a starting point.

<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(),
            address = "new york",
            // this function will get called inside geocode's callback
            // when we have received the async data
            renderStreetView = function(lat, lng) {
                var panorama,
                    map = document.getElementById('map');

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

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

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

                alert(latitude);
                alert(longitude);

                renderStreetView(latitude, longitude);
            }
        }); 
    }

</script>

score 0 · Accepted Answer · answered Sep 18 '15 at 06:16

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>

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

2 Answers2