Google Maps API v3.0 Map and Street View

in this code we can set the angle of the camera (pitch -90-0-90) as well as the Heading (angle 0-360)

by Egli

HTML

<!-- START: Google Maps API -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <!-- __END: Google Maps API -->
    <div id="map-container" >
        <div id="map_StreetView" style="width: 350px; height: 250px"></div><br/>
        <div id="map" style="width: 350px; height: 250px"></div>
    </div>

JavaScript

//<![CDATA[
// ************************   Variables   ************************
var infoWindow = new google.maps.InfoWindow();

//Map Options
var options = {
    lat: 34.028339,
    lon: -118.2881768,
    zoom: 15,
    type: 'roadmap',
    tytle: "Address: 1256 W. 29th St. Los Angeles, CA  90007",
    html: '<div class="tooltip"><span>Address</span>: 1256 W. 29th St. Los Angeles, CA  90007<\/div>',
    icons: {
        red:  'http://labs.google.com/ridefinder/images/mm_20_red.png',
        blue: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
        shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
        }
    };



// ************************   Functions   ************************
function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        //marker.openInfoWindowHtml(html);
        infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
    });
}


function googleMaps()
{
    var map = new google.maps.Map(document.getElementById("map"), { 
        center: new google.maps.LatLng( options.lat , options.lon ),
        zoom: options.zoom,
        mapTypeId: options.type
    });

    var marker = new google.maps.Marker({
        map: map,
        position: map.getCenter(),
        title: options.title,
        icon: options.icons.blue,
        shadow: options.icons.shadow
        });

    bindInfoWindow(marker, map, infoWindow, options.html);


    map.StreetView = new  google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), {
        position: map.getCenter(),
        pov: { heading: 370, pitch: -45, zoom: 1 }
    });
    //map.setStreetView(map.StreetView); //This line adds a street view icon to the roadmap and binds it together with streetView


} //end of load()


// ************************   Load   ************************
//Call googleMaps after document is...