Implement Google Maps v3 Street View

Question

I am trying to figure out how to turn one of the following three maps into a street view.

• Road Map
• Hybrid
• Satellite

This is the code below that I use to generate three different google maps:

var map;
var map2;
var map3;

$(document).ready(function(){

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
    var myLatLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);

var myOptions = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
map = new google.maps.Map(document.getElementById("map-canvas-1"),myOptions); 

var myOptions2 = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.HYBRID
    }
map2 = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions2);  

var myOptions3 = {
    zoom: 15,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
    }
map3 = new google.maps.Map(document.getElementById("map-canvas-3"),myOptions3);  

var marker = new google.maps.Marker({
  position: myLatLng, 
  map: map, 
  title:"Map1" }); 

  var marker = new google.maps.Marker({
  position: myLatLng, 
  map: map2, 
  title:"Map2" }); 

  var marker = new google.maps.Marker({
  position: myLatLng, 
  map: map3, 
  title:"Map3" }); 
}

Here is the code for the map division:

<div id="maptabs">
    <ul>
        <li><a href="#maptabs-1">Road Map</a></li>
        <li><a href="#maptabs-2">Hybrid</a></li>
        <li><a href="#maptabs-3">Satellite</a></li>
    </ul>
    <div id="maptabs-1">            
        <div id="map-canvas-1" class="map"></div>
    </div>
    <div id="maptabs-2">    
        <div id="map-canvas-2" class="map"></div>
    </div>
    <div id="maptabs-3">    
        <div id="map-canvas-3" class="map"></div>
    </div>
</div> 

How do I alter the map options for the satellite map to turn it into a street view instead? Thanks.

Answer 1

It's not as simple as Trott's answer because the POV will be wrong. I just spent several hours on this, and here's my answer, for those who end up on this question (since this is one of the questions I found, but the answer was of no use).

The street view POV is, by default, the direction the truck was facing when the image was shot (go figure). You need to get the location of the truck and the location of the house and calculate a "heading" from the first location to the second, then set your street-view location to that of the truck with the heading you just calculated:

// adrloc=target address
// svwloc=street-view truck location
svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
    if(sts==google.maps.StreetViewStatus.OK) {
        var svwloc=dta.location.latLng;
        var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
        var svwmap=avwMap.getStreetView();
        svwmap.setPosition(svwloc);
        svwmap.setPov({ heading: svwhdg, pitch: 0 });
        svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
        svwmap.setVisible(true);
        }
    else {
        ...
        }

Another trick/trap using street view is that you need to obtain the closest street view to your address location by repeatedly calling getPanoramaByLocation with an increasing distance until you are either successful or reach some maximum distance. I solve this using this code:

var SVW_MAX=100; // maximum street-view distance in meters
var SVW_INC=10;  // increment street-view distance in meters
var svwService=new google.maps.StreetViewService(); // street view service
var svwMarker=null; // street view marker

// NOTE: avwMap is the aerial view map, code not shown
...
resolveStreetView(avwMap.getCenter(),SVW_INC); 
...

var resolveStreetView=function(adrloc,svwdst) {
    svwService.getPanoramaByLocation(adrloc,svwdst,function(dta,sts) {
        if(sts==google.maps.StreetViewStatus.OK) {
            var svwloc=dta.location.latLng;
            var svwhdg=google.maps.geometry.spherical.computeHeading(svwloc,adrloc);
            var svwmap=avwMap.getStreetView();
            svwmap.setPosition(svwloc);
            svwmap.setPov({ heading: svwhdg, pitch: 0 });
            svwMarker=new google.maps.Marker({ map:svwmap, position: adrloc });
            svwmap.setVisible(true);
            }
        else if(svwdst<SVW_MAX) {
            resolveStreetView(adrloc,svwdst+SVW_INC);
            }
        });
    }

Answer 2

You can't do it by altering the MapOptions because a street view is not a MapType. The easiest thing to do is probably to programmatically instruct the map to show its StreetViewPanorama like so:

map3.getStreetView().setPosition(myLatLng);
map3.getStreetView().setVisible(true);