Google map api place search autocomplete with street view image button

Question

I've developed Google map place search with autocomplete feature. Right now I'd like add another feature like current what Google map has: once user select an address from autocomplete drop down list, a street view image with street view link will appear on bottom of the autocomplete. Click it will bring user to street view which is more accurate than the pegman.

Right now my struggle is don't know how to create this street view image for my address and link it to street view mode.

Thanks

Answer 1

A function that does it:

  function fx(latLng,node,map,size,key){
     //remove previous image
     node.innerHTML='';
     if(latLng){
        //create StreetViewService-instance
        if(!map.get('svs')){
          map.set('svs',new google.maps.StreetViewService());
        }
        //request panorama-data
        map.get('svs').getPanoramaByLocation(latLng,50,function(data, status){
          if (status == google.maps.StreetViewStatus.OK) {
            //create the image
            var img=new Image(),
            //collect the parameters for the static image
            params=['size='+(size||'200x100'),
                    'location='+latLng.toUrlValue(),
                    (key)?'key='+key:''];
            //set the src
            img.src='https://maps.googleapis.com/maps/api/streetview?'+
                     params.join('&');
            img.style.cursor='pointer';
            img.style.height='0';
            img.title='StreetView';
            //add click-listener
            google.maps.event.addDomListener(img,'click',function(){
              var pano=map.getStreetView();
              pano.setPano(data.location.pano);
              pano.setVisible(true);
            });
            //animate it
            google.maps.event.addDomListener(img,'load',function(){
              var that=this,
                  timer=setInterval(function(){
                    var h=that.offsetHeight;
                    if(h<that.naturalHeight){
                      that.style.height=Math.min(h+5,that.naturalHeight)+'px';
                    }
                    else{
                      clearInterval(timer);
                    }
                  },10);

            });
            //append the image to the node
            node.appendChild(img);

          }
        });
     }
  }

function-arguments:

• latLng

  a latLng(e.g. geometry.location) or something that evaluates to false(to remove the image)

• node

  the element where the image should be rendered(should be empty, existing contents will be removed)

• map

  the Maps-instance

• size(optional)

  a string (as defined in https://developers.google.com/maps/documentation/staticmaps/#Imagesizes)

• key(optional)

  your API-key(when you use the key the Street View Image API must be enabled in the API-console)

Demo: http://jsfiddle.net/doktormolle/4x8gvfrx/