Use Google Maps API to display Street View of a house based on an address

Question

I am trying to use Google Maps to display a streetview of a house based on an address. I have created a jsfiddle based on this tutorial. The fiddle is working to display t

Answer 1

There may be multiple solutions, I would suggest to store the maps-, marker and panorama-instances, then you only need to update their properties on further calls instead of creating new instances.

calling the function on button-click:

load_map_and_street_view_from_address($('textarea[name="new_address"]').val());

replacement for create_map_and_streetview & showPanoData:

function create_map_and_streetview(lat, lng, map_id, street_view_id) {
    var goo=google.maps,
        map=$('#'+map_id),
        pano=document.getElementById("pano"),
        addLatLng = new goo.LatLng(lat, lng),
        myOptions = {
        zoom: 14,
        center: addLatLng,
        mapTypeId: goo.MapTypeId.ROADMAP,
        backgroundColor: 'transparent',
        streetViewControl: false,
        keyboardShortcuts: false
    }
    if(!map.data('gmap')){
      //store the instances per $.data
      map.data('gmap',new goo.MVCObject());
      map.data('gmap').set('panorama',new goo.StreetViewPanorama(pano));
      map.data('gmap').set('service',new goo.StreetViewService());
      map.data('gmap').set('map',new goo.Map(map[0], myOptions));
      map.data('gmap').set('marker',new goo.Marker({
                                                  map: map.data('gmap').get('map'),
                                                  animation: goo.Animation.DROP,
                                                  position: addLatLng
                                                })
                      );
    }else{
      map.data('gmap').get('map').setCenter(addLatLng);
      map.data('gmap').get('marker').setPosition(addLatLng);
      //always create a new panorama
      //otherwise the panorama will be broken as soon as there is no picture available 
      map.data('gmap').set('panorama',new goo.StreetViewPanorama(pano));
    }

    map.data('gmap').get('service')
      .getPanoramaByLocation(addLatLng, 50, function(panoData, status){ 
         if (status != google.maps.StreetViewStatus.OK) {
            $('#pano').html('No StreetView Picture Available')
              .attr('style', 'text-align:center;font-weight:bold').show();
            return;
        }
      var angle = computeAngle(addLatLng, panoData.location.latLng);

      var panoOptions = {
        position: addLatLng,
        addressControl: false,
        linksControl: false,
        panControl: false,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        pov: {
            heading: angle,
            pitch: 10,
            zoom: 1
        },
        enableCloseButton: false,
        visible: true
      };

      map.data('gmap').get('panorama').setOptions(panoOptions);
    });

}

---

Demo: http://jsfiddle.net/R59mB/4/