Try this. Drag the pegman on the map and the streetview panorama will
point towards the marker on open. Drag the marker and the streetview
panorama will follow.
<html>
<head>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false";></script>
<script>
function initialize() {
var opts = {
center: new google.maps.LatLng(48.8589, 2.2958),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById('map'), opts);
var panorama = new
google.maps.StreetViewPanorama(document.getElementById('streetview'));
map.setStreetView(panorama);
var marker = new google.maps.Marker({
position: opts.center,
draggable: true
});
marker.setMap(map);
function refreshPanoPov() {
var markerPos = marker.getPosition();
var panoPos = panorama.getPosition();
if (markerPos && panoPos) {
var markerPosLat = markerPos.lat() / 180 * Math.PI;
var markerPosLng = markerPos.lng() / 180 * Math.PI;
var panoPosLat = panoPos.lat() / 180 * Math.PI;
var panoPosLng = panoPos.lng() / 180 * Math.PI;
var y = Math.sin(markerPosLng - panoPosLng) *
Math.cos(markerPosLat);
var x = Math.cos(panoPosLat)*Math.sin(markerPosLat) -
Math.sin(panoPosLat)*Math.cos(markerPosLat)*Math.cos(markerPosLng -
panoPosLng);
var brng = Math.atan2(y, x) / Math.PI * 180;
var pov = panorama.getPov();
pov.heading = brng;
panorama.setPov(pov);
}
}
google.maps.event.addListener(marker, 'position_changed',
refreshPanoPov);
google.maps.event.addListener(panorama, 'position_changed',
refreshPanoPov);
}
</script>
</head>
<body style="margin:0; padding:0" onload="initialize()">
<div id="map" style="width: 400px; height: 400px;"></div>
<div id="streetview" style="position:absolute; left:410px; top:
0px; width: 400px; height: 400px;"></div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
