javascript - Find correct streetview from Google maps URL without using computeheading -
i using computeheading code previous answer geocodezip works fine hiccups not geocodezips fault. variable "heading" recieves computeheading result , data positions heading view google maps streetview this:
var heading = google.maps.geometry.spherical.computeheading(panorama.getposition(), marker.getposition()); panorama.setpov({ heading: heading, zoom: 1, pitch: 0 }); }); however not accurate. achieve pass heading value google maps url's variable "heading". can strip out heading value, parse xml file, , echo result in infowindow on working map. if copy , paste code below can see process working @ 100%, pov (point of view) off (you need rotate street view) due computeheading, yet when try pass value of variable "newheading" "heading" not being read , pov defects default north... in other words "0". have tried "rearranging" code flow without success.
i have validated code in jshint , jslint , console
there no working examples of idea anywhere, have been through of google search page 30. other examples have seen use computeheading not want use. want use value of newheading variable parsed xml heading create correct streetview pov. hope have been clear enough , , suggestions 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"); (var = 0; < 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 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 real streetview url's same heading values passed 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>
pass desired heading createmarker function , use instead of calculating street view panorama location , "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; } 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"); (var = 0; < 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 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"></script> <div style="border: 2px solid #3872ac;" id="map"></div> <div id="side_bar"></div> <p>below real streetview url's same heading values passed 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>
Comments
Post a Comment