Raising an exception for a grey streetview location in Google Maps JavaScript API v3

StackOverflow https://stackoverflow.com/questions/17444229

Pregunta

Look, I'm using Google Maps JavaScript API v3. The user fills in an address and I show the streetview of that address. Everything's fine (a lot of locations work perfectly), till a enter a location like "Laken". It just displays grey, nothing else. I want to prevent the user from continuing to the next page with a grey image instead of a google maps streetview.

When I fill in Laken, the getPanoramaByLocation() function returns status == "OK", because it has found something, but its not a visible image, it's just grey. How can I prevent the API from doing this? Something like, when you can't display this location(is grey), display the next available location nearby.

Here's an extract from the code:

Function:

<script type="text/javascript">
//this is a standard location that I show when te user starts
 var map;
    var huis_lat,huis_lng;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
      });

      //SAVE HOMELAT&LONGT 
      $('#geocoding_form').submit(function(e){



        var address=document.getElementById("address").value;
    e.preventDefault();
        GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status)
          {

            if(status=='OK'){
              var latlng = results[0].geometry.location;          
              huis_lat=latlng.lat();
              huis_lng=latlng.lng();
              verander(huis_lat,  huis_lng);
              document.getElementById("div_overlayStart").style.display="none";
              document.getElementById("div_overlayThuis").style.display="block";          

            }
            else if(!address) //no address
            {
            alert("fout?")
            document.getElementById('alarm1').innerHTML = 'FILL IN ADDRESS';
            }
            else if(status=='UNKNOWN_ERROR')
            {
            document.getElementById('alarm1').innerHTML = 'UNKNOWN ERROR!';
            }
            else if(status=='ZERO_RESULTS')
            {
            document.getElementById('alarm1').innerHTML = 'UNKNOWN ADDRESS!';
            }
          }
        }); 

      });
    });
</script>

HTML:

EX: Fill in: Kongingslaan 1, Laken

<body>

<form method="post" id="geocoding_form">

<div class="input">

<input type="text" id="address" name="address" />

<button type="submit" class="linksSocial" style="border: 0; background: transparent">
<img src="images/btn_job.png" width="231" heght="36" alt="submit" />
</button>

</div>
</form>
</body>

Function verander():

<script type="text/javascript">
function verander(google_lat, google_lng) {
    var bryantPark = new google.maps.LatLng(google_lat, google_lng);
    var panoramaOptions = {
      position:bryantPark,
      pov: {
        heading: 185,
        pitch:0,
        zoom:1,
      },
      panControl : false,
      streetViewControl : false,
      mapTypeControl: false,
      overviewMapControl: false ,
      linksControl: false,
      addressControl:false,
      zoomControl : false,
    }
    map = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
    map.setVisible(true);
  }
</script>
¿Fue útil?

Solución 5

This solves the problem:

 <script type="text/javascript">
var map;
var huis_lat,huis_lng;
var richting = 0;
$(document).ready(function(){
 map = new GMaps({
    el: '#map',
    lat: -12.043333,
    lng: -77.028333
});


        //SAVE HOMELONG/LAT IN VAR
        $('#geocoding_form').submit(function(e){



        var address=document.getElementById("address").value;

        /* STATUS
        OK  The request was successful.
        UNKNOWN_ERROR   The request could not be successfully processed, yet the exact reason for failure is unknown.
        ZERO_RESULTS    There are no nearby panoramas.
        */

//CHECK IF ADDRESS IS VALID (IS THEIR A VALID X/Y COORDINATE FOR IT?)


        e.preventDefault();
        GMaps.geocode({
        address: $('#address').val().trim(),
        callback: function(results, status)
        {

        if(status=='OK'){
        var latlng = results[richting].geometry.location; 
        huis_lat=latlng.lat();
        huis_lng=latlng.lng();
        verander(huis_lat, huis_lng);
        document.getElementById("div_overlayStart").style.display="none";
        document.getElementById("div_overlayThuis").style.display="block"; 

        }
        else if(!address) //no address
        {
        document.getElementById('alarm1').innerHTML = 'Gelieve u adres in te vullen!';
        }
        else if(status=='UNKNOWN_ERROR')
        {
        document.getElementById('alarm1').innerHTML = 'Er ging iets mis (onbekende fout)!';
        }
        else if(status=='ZERO_RESULTS')
        {
        document.getElementById('alarm1').innerHTML = 'Er is van deze locatie geen streetview beschikbaar!';
        }
        }
        }); 

        });
        });

//+1 one for the array results[richting].geometry.location

        function verhoog(){    
        var address=document.getElementById("address").value;

            richting++;

            //e.preventDefault();
            GMaps.geocode({
              address: $('#address').val().trim(),
              callback: function(results, status)
              {

                if(status=='OK'){
                  var latlng = results[richting].geometry.location;     

                  huis_lat=latlng.lat();
                  huis_lng=latlng.lng();
                  verander(huis_lat,  huis_lng);
                  document.getElementById("div_overlayStart").style.display="none";
                  document.getElementById("div_overlayThuis").style.display="block";          

                }
             }
            }); 

      }
</script>

Check if the panorama (streetview) for these X/Y coordinates is visible (not grey). I use the function getPanoramaByLocation to determine this. This returns a status like the previous one. If there are ZERO_RESULTS (=grey zone) it activates the function verhoog() that increments the array of results by 1.

<script type="text/javascript">

var map;

function verander(google_lat, google_lng) {  

    var bryantPark = new google.maps.LatLng(google_lat, google_lng);

//CHECK FOR GREY ZONE

     var client = new google.maps.StreetViewService();
                client.getPanoramaByLocation(bryantPark, 50, function(result, status) {
                    if (status == "ZERO_RESULTS") {
                       verhoog();

                    }
                    else if(status == "OK")
                    {
                        var panoramaOptions = 
                        {
                          position:bryantPark,
                          pov: {
                            heading: 185,
                            pitch:0,
                            zoom:1,
                          },
                          panControl : false,
                          streetViewControl : false,
                          mapTypeControl: false,
                          overviewMapControl: false ,
                          linksControl: false,
                          addressControl:false,
                          zoomControl : false,
                        }
                        map = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
                        map.setVisible(true);
                    }

                    else if(status=='UNKNOWN_ERROR')
                    {
                    alert("Er ging iets mis");
                    }

                });  

  }

</script>

Otros consejos

Use google.maps.StreetViewService.getPanoramaByLocation() to determine if there is a panorama available for the given location.

Quick and dirty solution. I noticed resizing the Window worked for me on this problem. And it also worked if you fire the event via js. 

window.dispatchEvent(new Event('resize'));

Try this :

$(document).ready(function(){
    var map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
    });

    //SAVE HOMELAT&LONGT 
    $('#geocoding_form').submit(function(e) {
        e.preventDefault();
        var address = $('#address').val().trim();
        if(!address.length) {
            $('#alarm1').html('Fill in your address!');
        }
        GMaps.geocode({
            address: address,
            callback: function(results, status) {
                if(status !== 'OK' || results.length == 0) {
                    $("#div_overlayStart").show();
                    $("#div_overlayThuis").hide();
                }
                if(status !== 'OK') {
                    $('#alarm1').text('Something went wrong!');
                }
                else if(results.length == 0) {
                    $('#alarm1').html('No results found!');
                }
                else {
                    $('#alarm1').text('');
                    var latlng = results[0].geometry.location;
                    verander(latlng.lat(), latlng.lng());
                    $("#div_overlayStart").hide();
                    $("#div_overlayThuis").show();
                }
            }
        });
    });
});

I also had problems with StreetView displaying 'grey' at some locations.

I don't like the solution given here.

Have a look at my solution in another post, which is also to do with StreetView being displayed 'grey' at some locations -->

Google maps streetview tiles do not load in Firefox initially, only after dragging

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top