Skip to content
Advertisement

Find correct streetview from Google maps URL without using computeheading

I am using the computeHeading code from a previous answer by Geocodezip which mostly works fine but with some hiccups which are not Geocodezips fault. The variable “heading” recieves the computeHeading result and this data positions the heading view for google maps streetview like this:

var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
  panorama.setPov({
  heading: heading,
  zoom: 1,
  pitch: 0
});
});

However this is not always accurate. What I would like to achieve is pass the heading value from Google maps URL’s to the variable “heading”. I can strip out the heading value, parse it from an XML file, and echo the result in an infowindow on a working map. If you copy and paste the code below you can see that process working at 100%, but the POV (Point Of View) is slightly off (you need to rotate the street view) due to computeHeading, yet when I try to pass the value of the variable “NEWHEADING” to “heading” it is not being read and the POV defects to default north… in other words “0”. I have tried “rearranging” the code flow but without success.

I have validated this code in JSHint and JSLint and console

There are no working examples of this idea anywhere, I have been through all of google search to page 30. All other examples I have seen use computeHeading which I do not want to use. I want to use the value of the NEWHEADING variable from the parsed XML for the heading to create the correct StreetView POV. I hope I have been clear enough and any help and suggestions will 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">

var side_bar_html = "";
var gmarkers = [];
var myLatlng = new google.maps.LatLng(21.13962399, -86.8928956);
var panorama;
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

function createMarker(point, map, infoWindow, html, CompanyName) {
var marker = new google.maps.Marker({
  position: point,
  map: map,
  title: CompanyName
});
google.maps.event.addListener(marker, 'click', function() {
panorama = map.getStreetView();
panorama.setPosition(marker.getPosition());
google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
  var heading = google.maps.geometry.spherical.computeHeading(panorama.getPosition(), marker.getPosition());
  panorama.setPov({
    heading: heading,
    zoom: 1,
    pitch: 0
  });
});
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
bounds.extend(point);
gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '</a><br>';
return marker;
}

function initialize() {
var map = new google.maps.Map(document.getElementById("map"), myOptions);

var xmlDoc = xmlParse(xmlStr);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
  var CompanyName = markers[i].getAttribute("CompanyName");
  var CompanyDescription = markers[i].getAttribute("CompanyDescription");
  var CompanyTelephone = markers[i].getAttribute("CompanyTelephone");
  var NEWHEADING = parseFloat(markers[i].getAttribute("StreetView"));
  var point = new google.maps.LatLng(
    parseFloat(markers[i].getAttribute("lat")),
    parseFloat(markers[i].getAttribute("lng")));
    var html = "<H3>" + CompanyName + "</H3>" + CompanyDescription + "<BR>Tel: " + CompanyTelephone + "<BR><B>New Heading: " + NEWHEADING + "</B><BR>";
html += '<br /><input type="button" onclick="toggleStreetView();" value="See Street View" />';
    var marker = createMarker(point, map, infoWindow, html, CompanyName);
  }
document.getElementById("side_bar").innerHTML = side_bar_html;
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle === false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
  var doc = new ActiveXObject('Microsoft.XMLDOM');
  doc.loadXML(str);
  return doc;
}

if (typeof DOMParser != 'undefined') {
  return (new DOMParser()).parseFromString(str, 'text/xml');
}

return createElement('div', null);
}
var xmlStr = '<?xml version="1.0" encoding="UTF-8"?><markers><marker CompanyName="MCDONALDS" CompanyDescription="Tasty Hamburgers To Go" lat="21.141406" lng="-86.83339" StreetView="15.26" CompanyTelephone="01 998 893 6767"/><marker CompanyName="LITTLE CAESARS" CompanyDescription="Best Pizzas Anywhere" lat="21.161016" lng="-86.850647" StreetView="233.56" CompanyTelephone="01 998 893 6767"/><marker CompanyName="VIPS" CompanyDescription="Tasty Food" lat="21.113087" lng="-86.838704" StreetView="320.13" CompanyTelephone="+52 998 843 6666"/></markers>';
</script>
</head>

<body>
<div style="border: 2px solid #3872ac;" id="map"></div>
<div id="side_bar"></div>
<p>Below are the real Streetview URL's with the same HEADING values that are passed to the variable "NEWHEADING"</p>
<a href="https://www.google.com.mx/maps/@21.141406,-86.83339,3a,75y,15.26h,90t/data=!3m4!1e1!3m2!1scugaDFoU9Zhym3_IwhMKgQ!2e0!4m2!3m1!1s0x0:0xfde8520f397fad4b!6m1!1e1">McDonalds</a>
<BR>
<a href="https://www.google.com/maps/@21.161016,-86.850647,3a,75y,233.56h,90t/data=!3m4!1e1!3m2!1sjODIp985qSnPK1noHruiCw!2e0!4m2!3m1!1s0x0:0xc90acf0749a704b!6m1!1e1">Caesars Pizza</a>
<BR>
<a href="https://www.google.com.mx/maps/@21.113087,-86.838704,3a,75y,320.13h,96.48t/data=!3m4!1e1!3m2!1sZWlO1UlMwAuqAL0zEYY_zQ!2e0!6m1!1e1">Vips</a>
</body>
</html>

Advertisement

Answer

Pass the desired heading into the createMarker function and use that instead of calculating it from the street view panorama location and the “looked at” location.

function createMarker(point, map, infoWindow, html, CompanyName, heading) {
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: CompanyName
    });
    google.maps.event.addListener(marker, 'click', function () {
        panorama = map.getStreetView();
        panorama.setPosition(marker.getPosition());
        google.maps.event.addListenerOnce(panorama, 'status_changed', function () {
            panorama.setPov({
                heading: heading,
                zoom: 1,
                pitch: 0
            });
        });
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
    bounds.extend(point);
    gmarkers.push(marker);
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '</a><br>';
    return marker;
}

working fiddle

code snippet:

var side_bar_html = "";
var gmarkers = [];
var myLatlng = new google.maps.LatLng(21.13962399, -86.8928956);
var panorama;
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

function createMarker(point, map, infoWindow, html, CompanyName, heading) {
  var marker = new google.maps.Marker({
    position: point,
    map: map,
    title: CompanyName
  });
  google.maps.event.addListener(marker, 'click', function() {
    panorama = map.getStreetView();
    panorama.setPosition(marker.getPosition());
    google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
      panorama.setPov({
        heading: heading,
        zoom: 1,
        pitch: 0
      });
    });
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  bounds.extend(point);
  gmarkers.push(marker);
  side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + CompanyName + '</a><br>';
  return marker;
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  var xmlDoc = xmlParse(xmlStr);
  var markers = xmlDoc.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var CompanyName = markers[i].getAttribute("CompanyName");
    var CompanyDescription = markers[i].getAttribute("CompanyDescription");
    var CompanyTelephone = markers[i].getAttribute("CompanyTelephone");
    var NEWHEADING = parseFloat(markers[i].getAttribute("StreetView"));
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    var html = "<H3>" + CompanyName + "</H3>" + CompanyDescription + "<BR>Tel: " + CompanyTelephone + "<BR><B>New Heading: " + NEWHEADING + "</B><BR>";
    html += '<br /><input type="button" onclick="toggleStreetView();" value="See Street View" />';
    var marker = createMarker(point, map, infoWindow, html, CompanyName, NEWHEADING);
  }
  document.getElementById("side_bar").innerHTML = side_bar_html;
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle === false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

function xmlParse(str) {
  if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return createElement('div', null);
}
var xmlStr = '<?xml version="1.0" encoding="UTF-8"?><markers><marker CompanyName="MCDONALDS" CompanyDescription="Tasty Hamburgers To Go" lat="21.141406" lng="-86.83339" StreetView="15.26" CompanyTelephone="01 998 893 6767"/><marker CompanyName="LITTLE CAESARS" CompanyDescription="Best Pizzas Anywhere" lat="21.161016" lng="-86.850647" StreetView="233.56" CompanyTelephone="01 998 893 6767"/><marker CompanyName="VIPS" CompanyDescription="Tasty Food" lat="21.113087" lng="-86.838704" StreetView="320.13" CompanyTelephone="+52 998 843 6666"/></markers>';
#map {
  height: 400px;
  width: 700px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="border: 2px solid #3872ac;" id="map"></div>
<div id="side_bar"></div>
<p>Below are the real Streetview URL's with the same HEADING values that are passed to the variable "NEWHEADING"</p> <a href="https://www.google.com.mx/maps/@21.141406,-86.83339,3a,75y,15.26h,90t/data=!3m4!1e1!3m2!1scugaDFoU9Zhym3_IwhMKgQ!2e0!4m2!3m1!1s0x0:0xfde8520f397fad4b!6m1!1e1">McDonalds</a>

<BR>
<a href="https://www.google.com/maps/@21.161016,-86.850647,3a,75y,233.56h,90t/data=!3m4!1e1!3m2!1sjODIp985qSnPK1noHruiCw!2e0!4m2!3m1!1s0x0:0xc90acf0749a704b!6m1!1e1">Caesars Pizza</a>

<BR> <a href="https://www.google.com.mx/maps/@21.113087,-86.838704,3a,75y,320.13h,96.48t/data=!3m4!1e1!3m2!1sZWlO1UlMwAuqAL0zEYY_zQ!2e0!6m1!1e1">Vips</a>
User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement