Using Google Maps to show a streetview of a house based on an address

Everyone loves the streetview service that Google maps provides. Naturally the Google API provides the ability to embed streetview within a web application if you feed it the right data and co-ordinates.

What it doesn’t do naturally and easily is automatically point the streetview camera an address.
This is something that I thought would be simple but was actually more difficult than it sounds.

Although it is fairly simple to create a streetview panorama at a given GPS point, what is more complicated is to ensure that the streetview camera is pointing in the correct direction (point of view, or yaw).

Here is the script I wrote (based on some other things i’ve found in various places) to calculate the direction / yaw / point of view of the panorama so that it always points in the correct direction when you give it some co-ordinates.
This assumes you have 2 divs:

<div id="map_canvas"></div>
<div id="pano"></div>

And that you are using the Google Maps API V3

You can then simply pass a text address to:

load_map_and_street_view_from_address('25 some rd, someville, Some Country'); 

Script below:

function load_map_and_street_view_from_address(address) {

          var geocoder = new google.maps.Geocoder();
	  geocoder.geocode( { 'address': address}, function(results, status) {
	    if (status == google.maps.GeocoderStatus.OK) {
	        var gps = results[0].geometry.location;
		create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
	    }
	});
  }

    var map;
    var myPano;
    var panorama;
    var houseMarker;
    var addLatLng;
    var panoOptions;
    function create_map_and_streetview(lat, lng, map_id, street_view_id) {
	var googlePos = new google.maps.LatLng(lat,lng);

	panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
	addLatLng = new google.maps.LatLng(lat,lng);
	var service = new google.maps.StreetViewService();
	service.getPanoramaByLocation(addLatLng, 50, showPanoData);

    var myOptions = {
	zoom: 14,
	center: addLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	backgroundColor: 'transparent',
	streetViewControl: false,
	keyboardShortcuts: false,

    }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var marker = new google.maps.Marker({
            map: map,
            position: addLatLng
        });
    }

    function showPanoData(panoData, status) {
      if (status != google.maps.StreetViewStatus.OK) {
	$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
        return;
      }
    $('#pano').show();
      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
	};

	panorama.setOptions(panoOptions);

    }

    function computeAngle(endLatLng, startLatLng) {
      var DEGREE_PER_RADIAN = 57.2957795;
      var RADIAN_PER_DEGREE = 0.017453;

      var dlat = endLatLng.lat() - startLatLng.lat();
      var dlng = endLatLng.lng() - startLatLng.lng();
      // We multiply dlng with cos(endLat), since the two points are very closeby,
      // so we assume their cos values are approximately equal.
      var yaw = Math.atan2(dlng * Math.cos(endLatLng.lat() * RADIAN_PER_DEGREE), dlat)
             * DEGREE_PER_RADIAN;
      return wrapAngle(yaw);
   }

   function wrapAngle(angle) {
	if (angle >= 360) {
	    angle -= 360;
	} else if (angle < 0) {
	    angle += 360;
	}
	return angle;
    };

Note: some of this syntax uses Jquery, but it should be fairly easily ported to other frameworks or straight JS.

UPDATE: I hacked together a quick demo here

Tags: , , ,

9 Comments

  1. alexg March 16, 2011 at 9:01 am #

    Hi,

    could you post an example please?
    I have a blank page when i test your script…

    Thanks

    • jaycoadmin February 19, 2012 at 12:53 am #

      I have posted a link to a demo above.

  2. Neiyo May 25, 2011 at 12:49 pm #

    Hi,

    I’m already searching something like that.

    It would be great to have a demo, and why not source code to download.

    Thanks.

    • jaycoadmin February 19, 2012 at 12:53 am #

      Have just added a demo link above.

  3. skogsmaskin June 12, 2011 at 3:18 pm #

    Great post. I gracefully lifted your angle formulas. Tnx.

  4. cobijitas November 15, 2011 at 7:09 pm #

    Excellent post!. It was very useful. Thanks.

  5. Robert February 18, 2012 at 10:25 pm #

    Love this bit. We are currently using this on our site. But I wonder if you have one for the static street view? My javascript chops are so sllooow.

    In this static image script the ‘heading’ is rarely correct. We could grab the coordinates from our database. Will your angle formula work here?

    src=”http://maps.googleapis.com/maps/api/streetview?size=640×480&location=

    &fov=80&heading=250&pitch=8&sensor=false”

    awesome post!

  6. Abbas September 21, 2012 at 3:19 am #

    This appears to work great in firefox. However it does not work in IE 9. When I download the demo file and run in IE locally, I get an Active X error (appears IE is blocking part of the page).

    Also, when I open the above demo link in IE 9, it does not work.

    Is there a work-around? Please advise

  7. Tomas November 6, 2012 at 4:53 pm #

    Hey, I wonder what DEGREE_PER_RADIAN and RADIAN_PER_DEGREE should be if I want to turn 90′ angle from the street to the property instead of corner angle I get from your example? Thanks

Post Comment