index.html

<!DOCTYPE HTML>
<HTML>
    <HEAD>
        <TITLE>Street View Images Sample</TITLE>
        <SCRIPT src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></SCRIPT>
        <SCRIPT src="./StreetViewImages.js"></SCRIPT>
        <SCRIPT type="text/javascript">
        function main() {
            new StreetViewImages({
                origin: document.getElementById("origin").value,
                destination: document.getElementById("destination").value,
                apiKey: document.getElementById("apiKey").value,
                onPanoLoaded: function (pano) {
                    console.log(pano);
                    document.body.appendChild(document.createElement("img"))
                        .src = pano.panoUrl
                },
                onError: function (err) {
                    console.log(err);
                },
                onComplete: function () {
                    console.log("Done pulling images on route");
                }
            });
        }
        </SCRIPT>
    </HEAD>
    <BODY>
        <h1>Street View Images Sample Usage</h1>
        <p>Enter an origin and destination below along with a google maps api developer key. Usage rates will apply when pulling images.</p>
        <p>Upon clicking go, the images along the provided route will be appended to the DOM.</p>
        <p>This page is intended as a sample usage page to get started with.</p>
        <label for="origin">Origin</label>
        <input type="text" value="Golden, CO" placeholder="origin" id="origin" />
        <label for="destination">Destination</label>
        <input type="text" value="Boulder, CO" placeholder="destination" id="destination" />
        <label for="Google API Key">API Key</label>
        <input type="text" placeholder="api key" id="apiKey" />
        <input type="button" onclick="main()" value="Go" />
    </BODY>
</HTML>