{"id":17909,"date":"2015-10-24T05:01:10","date_gmt":"2015-10-23T19:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17909"},"modified":"2015-10-24T09:25:12","modified_gmt":"2015-10-23T23:25:12","slug":"google-chart-map-chart-select-event-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-map-chart-select-event-primer-tutorial\/","title":{"rendered":"Google Chart Map Chart Select Event Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Map Chart Select Event Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.gif\" title=\"Google Chart Map Chart Select Event Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Google Chart Map Chart Select Event Primer Tutorial<\/p><\/div>\n<p>Yesterday with <a target=_blank title='HTML\/Javascript Where Does It Get Me To Primer Tutorial' href='#hjwdigmtpt'>HTML\/Javascript Where Does It Get Me To Primer Tutorial<\/a> as shown below, you will have noticed how its interesting central part used the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a>, as we&#8217;ve discussed earlier, at this blog.<\/p>\n<p>We&#8217;ve improved the functionality of this Map Chart regarding its ToolTips, which we discussed with <a target=_blank title='PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-map-tooltips-tutorial\/'>PHP\/Javascript\/HTML Google Chart Map Tooltips Tutorial<\/a>, but today, we want to extend that a bit further to include some functionality for some <i>onclick<\/i> of the Google Map &#8220;pin&#8221; functionality, which in Google Chart terms is their &#8220;select&#8221; event, which you can read a lot about <a target=_blank title='Google Chart events' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/events?hl=en'>here<\/a> &#8230; thanks, Google.<\/p>\n<p>Latching onto this new <i>onclick<\/i> (or &#8220;select&#8221;) event logic we are going to add an optional (ie. it depends on the URL call) menu as extra functionality to call extra web pages for that point&#8217;s latitude,longitude with respect to &#8230;<\/p>\n<ul>\n<li>Google Map &#8230; larger terrestrial map<\/li>\n<li>Nearby Airports Google Chart Map Chart &#8230; talked about at <a target=_blank title='HTML5 Canvas Map Clickaround Onresize Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-canvas-map-clickaround-onresize-tutorial\/'>HTML5 Canvas Map Clickaround Onresize Tutorial<\/a><\/li>\n<li>Sun Angle at Noon &#8230; for this one, and two below, to recap, perhaps peruse <a target=_blank title='Integrating a Google Map Chart with Geographicals Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/integrating-a-google-map-chart-with-geographicals-tutorial\/'>Integrating a Google Map Chart with Geographicals Tutorial<\/a><\/li>\n<li>Moon Angle at Noon<\/li>\n<li>Coriolis Force<\/li>\n<\/ul>\n<p>As we speak, Dick Whittington&#8217;s cat is looking up nearby airports in the <a target=_blank title='Atacama Desert information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Atacama_Desert'>Atacama Desert<\/a> &#8230; don&#8217;t ask.<\/p>\n<p>This extra functionality, available via the suffix &#8220;&amp;onclick=y&#8221; applied to the Google Chart Map Chart title, flows on directly to the iPad iOS App we created and talked about, last, with <a target=_blank title='Xcode Swift iOS Application End Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-swift-ios-application-end-game-primer-tutorial\/'>Xcode Swift iOS Application End Game Primer Tutorial<\/a>.<\/p>\n<p>Here is a link to some downloadable PHP programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php----GETME' title='Download me'>map.php<\/a> which changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php----GETME' title='map.php'>this link<\/a>.<\/p>\n<p>Supervising that PHP, the HTML\/Javascript source code is <a target=_blank title=\"distance_from.html\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html-GETME\">distance_from.html<\/a> which changed from yesterday as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html-GETME' title='distance_from.html'>this link<\/a>.<\/p>\n<p>That all gets you to a <a target=_blank title=\"distance_from.html\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html\">live run<\/a> you can try, or you can try the Google Chart Map Chart functionality, in isolation, as a web application live run <a target=_blank title='Google Chart Map Chart live run' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php'>here<\/a>.<\/p>\n<hr>\n<p id='hjwdigmtpt'>Previous relevant <a target=_blank title='HTML\/Javascript Where Does It Get Me To Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-where-does-it-get-me-to-primer-tutorial\/'>HTML\/Javascript Where Does It Get Me To Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML\/Javascript Where Does It Get Me To Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.jpg\" title=\"HTML\/Javascript Where Does It Get Me To Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Where Does It Get Me To Primer Tutorial<\/p><\/div>\n<p>Did <a target=_blank title='Dick Whittington information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Dick_Whittington_and_His_Cat'>Dick Whittington<\/a> just get up and leave with that pole and the cat and the small number of belongings?  Don&#8217;t remember, actually.  But supposing you could do that, where would the road take you?  And supposing you could just get to places like the <a target=_blank title='As the crow flies ... information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/As_the_crow_flies'>crows<\/a> do?  Start your crow <a target=_blank title='As the crow flies ... to horizon' href='https:\/\/www.google.com\/?gws_rd=ssl#q=distance+in+kilometres+to+horizon'>5 ft 7 in<\/a> up in the air and tell it to fly to the horizon east or maybe south or maybe north-east &#8230; you get what we mean?  Well, today&#8217;s web application (whose HTML\/Javascript source code is <a target=_blank title=\"distance_from.html\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html_GETME\">distance_from.html<\/a>) imagines &#8220;Dick Whittington as a 5 ft 7 in Crow&#8221; &#8230; you heard it here, first, folks!<\/p>\n<p>But, seriously, it is quite interesting to get the Earth&#8217;s size in perspective.  And here in Sydney, recently, we got the new <a target=_blank title='Barangaroo Point Reserve' href='http:\/\/www.smh.com.au\/nsw\/barangaroo-point-reserve-time-lapse-transformation-from-concrete-slab-to-parkland-20150728-gilz7r.html'>Barangaroo Point Reserve<\/a> with its reconstructed &#8220;as it was&#8221; coastline to try to imagine, at least, the tiniest bit of our Sydney Harbour coastline as it was, and to take it back to those times Dick Whittington could have been plonked here (among the snakes and spiders I presume) and just asked to set out, with the cat (who was really quite excellent with Google Maps).<\/p>\n<p>Of course, before Google Maps, and electronic distance measuring, we relied a lot more on <a target=_blank title='Compass information via Google search' href='https:\/\/www.google.com.au\/#q=compass'>compasses<\/a> and measuring chains.  If there was measuring involved, with the navigation, <a target=_blank title='Sextant information via Google search' href='https:\/\/www.google.com.au\/#q=sextant'>sextants<\/a>, at sea, and <a target=_blank title='Theodolite information via Google search' href='https:\/\/www.google.com.au\/#q=theodolite'>theodolites<\/a>, on land, used sun (and other star) observations, to work out where you were.  Nowadays, with mobile technology, it&#8217;s hard not to know where you are, and today&#8217;s web application starts some of its Javascript work, if you allow it, to <a target=_blank title='Geolocate information via Google search' href='https:\/\/www.google.com.au\/#q=geolocate'>geolocate<\/a> yourself, where you are running the web application, as a starting point for your musings via the <b>bold<\/b> code &#8230;<\/p>\n<p><code><br \/>\n<b>function showLocation( position ) {<\/b><br \/>\n  var cdate = new Date();  \/\/ thanks to http:\/\/stackoverflow.com\/questions\/10211145\/getting-current-date-and-time-in-javascript<br \/>\n  <b>latitude = position.coords.latitude;<br \/>\n  longitude = position.coords.longitude;<\/b><br \/>\n  llsuff = \"&latitude=\" + latitude + \"&longitude=\" + longitude  + \"&maxdist=\" + document.getElementById('maxdist').value;<br \/>\n  document.getElementById('myh2').innerHTML = \"Current Location is Latitude: \" + latitude + \" and Longitude: \" + longitude + \" at \" + (\"0\" + cdate.getDate()).slice(-2) + \"\/\" + (\"0\" + eval(1 + cdate.getMonth())).slice(-2)  + \"\/\" + cdate.getFullYear() + \":\" + (\"0\" + cdate.getHours()).slice(-2) + \":\" + (\"0\" + cdate.getMinutes()).slice(-2) + \":\" + (\"0\" + cdate.getSeconds()).slice(-2);<br \/>\n  document.getElementById('myiframe').src = \"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php?title=Here&label=['Lat',&value='Lon','Name']&data=,[\" + latitude + \",\" + longitude + \",~Here~]\"; \/\/+ latitude + \" and Longitude: \" + longitude + \" at \" + (\"0\" + cdate.getDate()).slice(-2) + \"\/\" + (\"0\" + eval(1 + cdate.getMonth())).slice(-2)  + \"\/\" + cdate.getFullYear() + \":\" + (\"0\" + cdate.getHours()).slice(-2) + \":\" + (\"0\" + cdate.getMinutes()).slice(-2) + \":\" + (\"0\" + cdate.getSeconds()).slice(-2);<br \/>\n  if (firstgo == 1) {<br \/>\n    firstgo = 0;<br \/>\n    <b>setInterval(getLocation, 30000);<\/b><br \/>\n  }<br \/>\n}<br \/>\n<b><br \/>\nfunction errorHandler( err ) {<br \/>\n  if (err.code == 1) {<br \/>\n    \/\/ access is denied<br \/>\n    alert(\"Access is denied\");<br \/>\n  }<br \/>\n}<br \/>\n<\/b><b><br \/>\nfunction getLocation() {<br \/>\n  if (selc == 0) {<br \/>\n   selc=1;<br \/>\n   var geolocation = navigator.geolocation;<br \/>\n   geolocation.getCurrentPosition(showLocation, errorHandler,<br \/>\n                                 {maximumAge: 75000});<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; or you can pick your own latitude,longitude starting place &#8230; and then we proceed with another Google product by accessing a Google Map Chart to give you a start map &#8230; the rest of your travels are up to where you decide to &#8220;crow&#8221; fly.  Happy <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/distance_from.html\" title='click picture'>travels<\/a>!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17898' onclick='var dv=document.getElementById(\"d17898\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geolocation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17898' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d17909' onclick='var dv=document.getElementById(\"d17909\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17909' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday with HTML\/Javascript Where Does It Get Me To Primer Tutorial as shown below, you will have noticed how its interesting central part used the Google Charts Map Chart, as we&#8217;ve discussed earlier, at this blog. We&#8217;ve improved the functionality &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-map-chart-select-event-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1727,483,513,518,1726,576,630,652,679,745,830,861,932,997,1319],"class_list":["post-17909","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-distance","tag-geolocation","tag-google","tag-google-chart","tag-google-map","tag-html","tag-ipad","tag-javascript","tag-land-surveying","tag-map","tag-navigation","tag-onclick","tag-php","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17909"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=17909"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17909\/revisions"}],"predecessor-version":[{"id":17925,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17909\/revisions\/17925"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}