street_stroll.js

// Street Stroll JavaScript
//   by nox  2015/01/22

var map = null;
var streetview = null;
var marker = null;
var info_window = null;
var streetlayer = null;

function initialize() {
    var latlng = new google.maps.LatLng(35.698584, 139.774216); // Akihabara.

    streetview = new google.maps.StreetViewPanorama(document.getElementById("streetview"));
    streetview.setPosition(latlng);

    streetlayer = new google.maps.StreetViewCoverageLayer();

    map = new google.maps.Map(document.getElementById("map_canvas"), {
            center: latlng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            smallMapControl: true,
            mapTypeControl: true,
            streetViewControl: false,
            scaleControl: true,
            overviewMapControl: true,
            overviewMapControlOptions: {
                opened: true
            }
        });
    map.setStreetView(streetview);

    marker = new google.maps.Marker({
        position: latlng,
        icon: getArrowIcon(0.0),
        animation: google.maps.Animation.DROP,
        map: map
    });

    google.maps.event.addListener(streetview, "position_changed", moveStreet);
    google.maps.event.addListener(streetview, "pov_changed", headingStreet);
    google.maps.event.addListener(map, "click", function(event_) {
            var service = new google.maps.StreetViewService();
            service.getPanoramaByLocation(event_.latLng, 100, function(data_, status_) {
                    if (status_ != google.maps.StreetViewStatus.OK) return;
                    var new_latlng = data_.location.latLng;
                    streetview.setPosition(new_latlng);
                    map.panTo(new_latlng);
                    map.setCenter(new_latlng);
                    marker.setPosition(new_latlng);
                });
    });
}

function getArrowIcon(bearing_) {
    var iconUrl = "http://nox.appspot.com/images/marker/view_marker_" + (3 * Math.round(bearing_ / 3)) + ".png";
    var iconSize = new google.maps.Size(92, 92);
    var iconOrigin = new google.maps.Point(0, 0);
    var iconAnchor = new google.maps.Point(46, 46);
    return new google.maps.MarkerImage(iconUrl, iconSize, iconOrigin, iconAnchor);
}

function moveStreet() {
    var latlng = streetview.getPosition();
    map.setCenter(latlng);
    marker.setPosition(latlng);
    updateMarkerLocation();
}

function headingStreet() {
    var heading = streetview.getPov().heading;
    while (heading < 0) heading += 360;
    while (heading >= 360) heading -= 360;
    marker.setIcon(getArrowIcon(heading));
    updateMarkerLocation();
}

function toggleOverlay() {
    if (streetlayer.getMap()) streetlayer.setMap(null);
    else streetlayer.setMap(map);
}

function updateMarkerLocation() {
    if (info_window) {
        pov = streetview.getPov();
        heading = pov.heading;
        while (heading < 0) heading += 360;
        while (heading >= 360) heading -= 360;
        var displayString =
            ["Position: " + marker.getPosition().toString(),
             "Heading: " + heading,
             "Pitch: " + pov.pitch,
             "Zoom: " + pov.zoom
             ].join("<br />");
        info_window.setContent(displayString);
    }
}

function toggleMarkerLocation() {
    if (!info_window) {
        pov = streetview.getPov();
        info_window = new google.maps.InfoWindow();
        updateMarkerLocation();
        info_window.open(map, marker);
    } else {
        info_window.close();
        info_window = null;
    }
}