Показывать только улицу улицы google, когда доступно

Question

У меня есть динамическая страница, которая тянет разные места в зависимости от идентификатора. У меня есть три вкладки для описания местоположения, карт google и один для просмотра улиц. Все работает - проблема, с которой я сталкиваюсь, - это когда нет просмотра улиц, это показывает серый квадрат.

Я думал, что нашел решение, используя 'getPanoramaByLocation', но я не могу заставить его работать правильно. Это то, что у меня есть:

var WINDOW_HTML = '<div style="width: 200px; overflow: hidden; word-wrap:break-word;"><p><?php echo htmlspecialchars($title); ?><br /><?php echo htmlspecialchars($locationDetails); ?></p></div>'; 
    var map = ''; 
    var myLatlng; 

    /* Check if Streetview is available */ 
    var latLng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>);      

    var streetViewCheck = new google.maps.StreetViewService(); 
    streetViewCheck.getPanoramaByLocation(latLng, 50, function(result, status) { 
      if (status == google.maps.StreetViewStatus.ZERO_RESULTS) { 
       streetViewAvailable = 0;   
      } else { 
       streetViewAvailable = 1; 
      } 
    });   

    function initialize() {     
     myLatlng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>); 
     var mapOptions = { 
      zoom: 13, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('themap'), mapOptions); 

     /* Street view addition */     
     if (streetViewAvailable == 1) {     
      var panoramaOptions = { 
      position: myLatlng, 
      pov: { 
       heading: 34, 
       pitch: 10 
      }, 
      visible:true 
      }; 
      var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);      
      map.setStreetView(panorama); 
      alert('Street View Available'); 
     } else { 
      /* Hide the street view tab if it isn't available */ 
      $('#svTab').hide(); 
      alert('Street View NOT Available');     
     }   

     /* Resize Fix for tabs */ 
     google.maps.event.addListener(map, 'resize', function() { 
      this.setZoom(13); 
      this.setCenter(myLatlng); 
      var infowindow = new google.maps.InfoWindow({ 
       content: WINDOW_HTML 
      }); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map 
      });    
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      });     
      infowindow.open(map,marker); 
     }); 
     // Tab fix for streetview refresh 
      $('#svTab').on('shown', function (e) { 
      $('#pano').show();     
      panorama.setVisible(true); 

     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

Я пробовал много разных вещей, и я, кажется, чтобы получить различные результаты - одна установка я, казалось, работает, но когда я обновил страницу по неизвестной причине было бы то скажите, что мой «streetViewAvailable» не был определен (это было так, как если бы он не работал через мою функцию streetViewCheck).

Answer 1

Наконец-то удалось разобраться. Мне пришлось удалить переменную 'streetViewAvailable' и вместо этого добавить функцию внутри оператора streetviewstatus if. Вот как это выглядело.

var WINDOW_HTML = '<div style="width: 200px; overflow: hidden; word-wrap:break-word;"><p><?php echo htmlspecialchars($title); ?><br /><?php echo htmlspecialchars($locationDetails); ?></p></div>'; 
    var map = ''; 
    var myLatlng;      

    function initialize() {     
     myLatlng = new google.maps.LatLng(<?php echo htmlspecialchars($lat.','.$lon); ?>); 
     var mapOptions = { 
      zoom: 13, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById('themap'), mapOptions); 


     /* Resize Fix for tabs */ 
     google.maps.event.addListener(map, 'resize', function() { 
      this.setZoom(13); 
      this.setCenter(myLatlng); 
      var infowindow = new google.maps.InfoWindow({ 
       content: WINDOW_HTML 
      }); 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map 
      });    
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      });     
      infowindow.open(map,marker); 
     }); 

     /* Check Streetview is available */ 
     var streetViewService = new google.maps.StreetViewService(); 
     var STREETVIEW_MAX_DISTANCE = 50; 

     streetViewService.getPanoramaByLocation(myLatlng, STREETVIEW_MAX_DISTANCE, function (streetViewPanoramaData, status) { 
      if (status === google.maps.StreetViewStatus.OK) {     
       function svcheck() {              
        var panoramaOptions = { 
         position: myLatlng, 
         pov: { 
          heading: 34, 
          pitch: 10 
         }, 
         visible:true 
        } 
        var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);      
        map.setStreetView(panorama); 

        // Tab fix for streetview refresh 
        $('#svTab').on('shown', function (e) { 
         $('#pano').show();     
         panorama.setVisible(true);        
        }); 
       } 
       svcheck(); 
      } else { 
       /* Street view is unavailable - HIDE THE TAB! */ 
       $('#svTab').hide(); 
      } 
     }); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize);