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

Question

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>

There is nothing gray when I search for an invalid address(BTW: "Laken" for me returns a result, a sea in norway) . Please show us `verander()` — Dr.Molle, Jul 03 '13 at 09:59
Can you not simply test `results.length` in the callback and branch accordingly? — Beetroot-Beetroot, Jul 03 '13 at 10:04
@Dr.Molle : Insert Laken in the textbox here and you'll see what I mean (http://www.jobadvisor.scriptonite.be/jobadvisor.html). I added verander() to the description. — Shouse, Jul 03 '13 at 10:14
@Beetroot-Beetroot : And if I test length on a wrong location would it be null or ... ? — Shouse, Jul 03 '13 at 10:17
@Shouse: you should refine your question, the issue is not a failing geocode-request, it's a non-existing StreetViewPanorama for a given location — Dr.Molle, Jul 03 '13 at 10:33

score 3 · Answer 1 · answered Jul 03 '13 at 10:30

3

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

answered Jul 03 '13 at 10:30

Dr.Molle

116,463
16
195
201

Ok, this helped me to solve a part of my problem. The value "ZERO_RESULTS" is returned by this function when This ensures the user can't fill in a place like like "abcdefg". But the real problem, what I see now, is that when I type in "Laken", it shows something but it's a grey zone. So the getPanoramaByLocation() function returns "OK", because it has found something, but its not a visible image, it's just grey. – Shouse Jul 03 '13 at 11:51
This is the complete message--> Ok, this helped me to solve a part of my problem. The value "ZERO_RESULTS" is returned by this function when the user fills in a place like "abcdefg". Thx! But the real problem, what I see now, is that when I type in "Laken", it shows something but it's a grey zone. So the getPanoramaByLocation() function returns "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. – Shouse Jul 03 '13 at 12:07
For me `getPanoramaByLocation()` for the LatLng of Laken returns `ZERO_RESULTS` – Dr.Molle Jul 03 '13 at 22:18
I got it! Do I need to edit my question and add the new code to it or? I don't know how this works on stackoverflow :p – Shouse Jul 04 '13 at 09:19

score 3 · Answer 2 · answered May 12 '15 at 14:04

3

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'));

answered May 12 '15 at 14:04

Stefan_K

31
4

Beetroot-Beetroot · Answer 3 · 2013-07-03T10:36:52.193

0

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();
                }
            }
        });
    });
});

edited Jul 03 '13 at 10:36

answered Jul 03 '13 at 10:28

Beetroot-Beetroot

18,022
3
37
44

But the real problem, what I see now, is that when I type in "Laken", it shows something but it's a grey zone. So the getPanoramaByLocation() function returns "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. – Shouse Jul 03 '13 at 12:10
Tricky, I'm not sure it's possible to detect "grey" automatically. An if it was, then what about "brown" or "spotty" etc? But remember you are displaying results[0], ie the first of potentially many results. You could introduce into the interface the means for the user to scroll through the results for himself and choose the one that suits him. – Beetroot-Beetroot Jul 03 '13 at 12:23
Great tip! Didn't like the idea of the user scrolling through the results so I solved it by adding a a button with the text: "Is your picture grey? Click here!". This button has an onClick() function that increments varPosition in results[varPosition].geometry.location with +1. The users can keep doing this till he gets a non grey street view. – Shouse Jul 03 '13 at 13:56
Two heads are are often better than one. Sounds like you've got a workable solution. – Beetroot-Beetroot Jul 03 '13 at 16:13

score 0 · Answer 4 · edited May 23 '17 at 11:51

0

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

edited May 23 '17 at 11:51

Community

1
1

answered Sep 17 '14 at 15:41

paulo62

2,637
1
21
15

score -1 · Accepted Answer · answered Jul 04 '13 at 10:18

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>

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

5 Answers5

Linked