I've implemented the computeHeading code from a previous answer by Geocodezip, which is mostly effective but has some minor issues that are not related to Geocodezip. The resulting value from computeHeading is stored in the "heading" variable, which determines the position of the heading view for Google Maps Street View as shown below:
var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
panorama.setPov({
heading: heading,
zoom: 1,
pitch: 0
});
});
However, this approach is not always accurate. My goal is to extract the heading value from Google Maps URLs and assign it to the "heading" variable. I can extract the heading value, parse it from an XML file, and display the result in an info window on a functional map. If you copy and paste the code below, you can observe this process working correctly, but the Point Of View (POV) is slightly off due to the computeHeading method. When I attempt to assign the value of the "NEWHEADING" variable to "heading", it fails to read the value, causing the POV to default to north (0). I have tried reorganizing the code flow without success.
I have validated this code using JSHint, JSLint, and console debugging.
No existing examples demonstrate this concept, as I have searched through Google extensively with no results beyond page 30. All other examples rely on computeHeading, which I wish to avoid. Instead, I want to use the value of the NEWHEADING variable extracted from parsed XML data to determine the correct Street View POV. I hope this explanation is clear, and any assistance or suggestions would be greatly appreciated.
<html>
<head>
<style>
#map {
height: 400px;
width: 700px;
margin: 0px;
padding: 0px
}
</style>
<script src="http://maps.google.com/maps/api/js?v=3&libraries=visualization,places,geometry" type="text/javascript"></script>
<script type="text/javascript">
// JavaScript code goes here
</script>
</head>
<body>
<div style="border: 2px solid #3872ac;" id="map"></div>
<div id="side_bar"></div>
<p>Additional content can go here.</p>
<a href="#">Link example</a>
</body>
</html>