Skip to content
Advertisement

Place street view on major street rather than back street

Following code places camera on road closest to marker however its an back street and kind of useless for navigation.

Is there way to place camera on nearest major street instead (in this case “Eastern Ave”) without changing marker’s position rather checking picking programmatically closest major street over just any closest street.

var panorama, myPlace;

function initialize() {

    myPlace = {
        lat: 33.976827,
        lng: -118.163889
    };

    var map = new google.maps.Map(document.getElementById('map'), {
        center: myPlace,
        zoom: 18
    });

    panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), {
        position: myPlace
    });

    var marker = new google.maps.Marker({
        position: myPlace,
        map: map
    });

    map.setStreetView(panorama);

    var sv = new google.maps.StreetViewService();

    sv.getPanorama({
        location: myPlace,
        radius: 50
    }, processSVData);
}

function processSVData(data, status) {

    if (status === google.maps.StreetViewStatus.OK) {

        var marker_pano = new google.maps.Marker({
            position: myPlace,
            map: panorama
        });

        var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, marker_pano.getPosition());

        panorama.setPov({
            heading: heading,
            pitch: 0
        });
    }
}

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

http://jsfiddle.net/0LdqLzt6/

Advertisement

Answer

Using the answer from Request main road / curbside StreetView panoramas instead of back alleys from API with your address (to get the address I reverse geocoded your coordinates, then adjusted, as it seemed to want to point to the building next door).

var sv = new google.maps.StreetViewService();
var geocoder = new google.maps.Geocoder();
var directionsService = new google.maps.DirectionsService();
var panorama;
var address = "6327 Eastern Avenue, Bell, CA 90201, USA";
var myLatLng;

function initialize() {
  myPlace = {
    lat: 33.976827,
    lng: -118.163889
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    center: myPlace,
    zoom: 18
  });
  var marker = new google.maps.Marker({
    position: myPlace,
    map: map
  });
  panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
  map.setStreetView(panorama);
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      myLatLng = results[0].geometry.location;

      // find a Streetview location on the road
      var request = {
        origin: address,
        destination: address,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, directionsCallback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function processSVData(data, status) {
  if (status == google.maps.StreetViewStatus.OK) {

    panorama.setPano(data.location.pano);

    var heading = google.maps.geometry.spherical.computeHeading(data.location.latLng, myLatLng);
    panorama.setPov({
      heading: heading,
      pitch: 0,
      zoom: 1
    });
    panorama.setVisible(true);

  } else {
    alert("Street View data not found for this location.");
  }
}

function directionsCallback(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    var latlng = response.routes[0].legs[0].start_location;
    sv.getPanoramaByLocation(latlng, 50, processSVData);
  } else {
    alert("Directions service not successfull for the following reason:" + status);
  }
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map,
#pano {
  width: 100%;
  height: 50%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
<div id="pano"></div>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement