{"id":1392,"date":"2022-08-30T15:16:09","date_gmt":"2022-08-30T15:16:09","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/15\/combining-google-directions-and-google-places-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:16:09","modified_gmt":"2022-08-30T15:16:09","slug":"combining-google-directions-and-google-places-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/combining-google-directions-and-google-places-collection-of-common-programming-errors\/","title":{"rendered":"Combining Google Directions and Google Places-Collection of common programming errors"},"content":{"rendered":"<p>Finally, I found the errors that I made.<\/p>\n<p>First error.<\/p>\n<p>I did not pass a necessary argument <em>map<\/em> when I created a <em>service<\/em> object.<\/p>\n<pre><code>\/\/Before\n\nservice = new google.maps.places.PlacesService();\n\n\/\/After\n\nvar myOptions = {\nzoom: 8,\nstreetViewControl: false,\nmapTypeId: google.maps.MapTypeId.ROADMAP\n};     \n\nmap = new google.maps.Map(document.getElementById(\"map_canvas2\"), myOptions);\n\nservice =  new google.maps.places.PlacesService(map);\n<\/code><\/pre>\n<p>\nSecond error.<\/p>\n<p>I declared all variables inside a CalcRoute() function thus making them unreachable for other functions.<\/p>\n<p>So, I had to declare them as global variables.<\/p>\n<p>\nThird error.<\/p>\n<p>I made two requests to Google Places API at a time. This created an error.<\/p>\n<p>So, I put a second request in a callback function of a first one.<\/p>\n<p>\nHere is a final working example.<\/p>\n<pre><code>var map\n\nvar directionsDisplay;\nvar directionsService = new google.maps.DirectionsService();\n\n\nvar placesService;\n\nvar moscow = new google.maps.LatLng(55.749646,37.62368);\nvar start;\nvar end;\n\nvar places = [];\n\n\nfunction calcRoute() {\n\n\nstart = 'Domodedovo airport';\nend = 'Hotel Balchug Kempinsky';\n\nif(start == '' || end == '')\n{\ndocument.getElementById(\"directionsPanel\").innerHTML = \"<br \/><b>Sorry, directions not found.<\/b>  <br \/><br \/>\";\nreturn;\n}\n\nvar myOptions = {\nzoom: 8,\nstreetViewControl: false,\nmapTypeId: google.maps.MapTypeId.ROADMAP\n};     \nmap = new google.maps.Map(document.getElementById(\"map_canvas2\"), myOptions);\n\nvar request1 = {\nlocation: moscow,\nradius: '50000',\nquery: start\n};\n\n\/\/Executing Google Places request\n\nplacesService =  new google.maps.places.PlacesService(map);\nplacesService.textSearch(request1, callback1);\n\n\n}\n\n\n\n\nfunction callback1(results, status) { \n\nif (status == google.maps.places.PlacesServiceStatus.OK) {\nplaces[0] = results[0].formatted_address;\n\nvar request2 = {\nlocation: moscow,\nradius: '50000',\nquery: end\n};    \n\nplacesService.textSearch(request2, callback2);\n}\n\nelse\n{\ndocument.getElementById(\"directionsPanel\").innerHTML = \"<br \/><b>Sorry, directions not found.<\/b><br \/><br \/>\";\nreturn;\n}\n}  \n\n\nfunction callback2(results, status) {\nif (status == google.maps.places.PlacesServiceStatus.OK) {\nplaces[1] = results[0].formatted_address;\n\n \/\/Executing Google Directions request\n\nvar request = {\norigin:places[0], \ndestination:places[1],\ntravelMode: google.maps.DirectionsTravelMode.DRIVING\n};\n\ndirectionsService.route(request, \n\n\nfunction(response, status) {\nif (status == google.maps.DirectionsStatus.OK) {\n\n\ndirectionsDisplay = new google.maps.DirectionsRenderer();\n\ndirectionsDisplay.setMap(map);\n\ndirectionsDisplay.setDirections(response);\ndirectionsDisplay.setPanel(document.getElementById(\"directionsPanel\"));\n}\nelse\n{\ndocument.getElementById(\"directionsPanel\").innerHTML = \"<br \/><b>Sorry, directions not found.<\/b><br \/><br \/>\";\n};\n});\n\n \/\/End of Google Directions request\n\n}\nelse\n{\n  document.getElementById(\"directionsPanel\").innerHTML = \"<br \/><b>Sorry, directions not found.<\/b><br \/><br \/>\";\n  return;\n}\n} \n<\/code><\/pre>\n<p id=\"rop\"><small>Originally posted 2013-11-15 09:08:32. <\/small><\/p>","protected":false},"excerpt":{"rendered":"<p>Finally, I found the errors that I made. First error. I did not pass a necessary argument map when I created a service object. \/\/Before service = new google.maps.places.PlacesService(); \/\/After var myOptions = { zoom: 8, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(&#8220;map_canvas2&#8221;), myOptions); service = new google.maps.places.PlacesService(map); Second error. I declared all [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1392","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1392"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1392\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}