Modified: cordova/site/public/docs/en/dev/reference/cordova-plugin-geolocation/index.html URL: http://svn.apache.org/viewvc/cordova/site/public/docs/en/dev/reference/cordova-plugin-geolocation/index.html?rev=1752402&r1=1752401&r2=1752402&view=diff ============================================================================== --- cordova/site/public/docs/en/dev/reference/cordova-plugin-geolocation/index.html (original) +++ cordova/site/public/docs/en/dev/reference/cordova-plugin-geolocation/index.html Wed Jul 13 11:51:10 2016 @@ -6,12 +6,12 @@ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> - <meta name="description" content=" "> + <meta name="description" content="Access GPS data. "> <title> - cordova-plugin-geolocation - Apache Cordova + Geolocation - Apache Cordova </title> @@ -732,7 +732,7 @@ <li> <a class="" href="../../reference/cordova-plugin-battery-status/index.html"> - cordova-plugin-battery-status + Battery Status </a> @@ -747,7 +747,7 @@ <li> <a class="" href="../../reference/cordova-plugin-camera/index.html"> - cordova-plugin-camera + Camera </a> @@ -762,7 +762,7 @@ <li> <a class="" href="../../reference/cordova-plugin-console/index.html"> - cordova-plugin-console + Console </a> @@ -777,7 +777,7 @@ <li> <a class="" href="../../reference/cordova-plugin-contacts/index.html"> - cordova-plugin-contacts + Contacts </a> @@ -792,7 +792,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device/index.html"> - cordova-plugin-device + Device </a> @@ -807,7 +807,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-motion/index.html"> - cordova-plugin-device-motion + Device Motion </a> @@ -822,7 +822,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-orientation/index.html"> - cordova-plugin-device-orientation + Device Orientation </a> @@ -837,7 +837,7 @@ <li> <a class="" href="../../reference/cordova-plugin-dialogs/index.html"> - cordova-plugin-dialogs + Dialogs </a> @@ -852,7 +852,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file/index.html"> - cordova-plugin-file + File </a> @@ -867,7 +867,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file-transfer/index.html"> - cordova-plugin-file-transfer + File Transfer </a> @@ -882,7 +882,7 @@ <li> <a class="this-page" href="../../reference/cordova-plugin-geolocation/index.html"> - cordova-plugin-geolocation + Geolocation </a> <span class="entry-highlight"></span> @@ -899,7 +899,7 @@ <li> <a class="" href="../../reference/cordova-plugin-globalization/index.html"> - cordova-plugin-globalization + Globalization </a> @@ -914,7 +914,7 @@ <li> <a class="" href="../../reference/cordova-plugin-inappbrowser/index.html"> - cordova-plugin-inappbrowser + Inappbrowser </a> @@ -929,7 +929,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media/index.html"> - cordova-plugin-media + Media </a> @@ -944,7 +944,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media-capture/index.html"> - cordova-plugin-media-capture + Media Capture </a> @@ -959,7 +959,7 @@ <li> <a class="" href="../../reference/cordova-plugin-network-information/index.html"> - cordova-plugin-network-information + Network Information </a> @@ -974,7 +974,7 @@ <li> <a class="" href="../../reference/cordova-plugin-splashscreen/index.html"> - cordova-plugin-splashscreen + Splashscreen </a> @@ -989,7 +989,7 @@ <li> <a class="" href="../../reference/cordova-plugin-vibration/index.html"> - cordova-plugin-vibration + Vibration </a> @@ -1004,7 +1004,7 @@ <li> <a class="" href="../../reference/cordova-plugin-statusbar/index.html"> - cordova-plugin-statusbar + Statusbar </a> @@ -1019,7 +1019,7 @@ <li> <a class="" href="../../reference/cordova-plugin-whitelist/index.html"> - cordova-plugin-whitelist + Whitelist </a> @@ -1034,7 +1034,7 @@ <li> <a class="" href="../../reference/cordova-plugin-legacy-whitelist/index.html"> - cordova-plugin-legacy-whitelist + Legacy Whitelist </a> @@ -1388,7 +1388,7 @@ <li> <a class="" href="../../reference/cordova-plugin-battery-status/index.html"> - cordova-plugin-battery-status + Battery Status </a> </li> @@ -1397,7 +1397,7 @@ <li> <a class="" href="../../reference/cordova-plugin-camera/index.html"> - cordova-plugin-camera + Camera </a> </li> @@ -1406,7 +1406,7 @@ <li> <a class="" href="../../reference/cordova-plugin-console/index.html"> - cordova-plugin-console + Console </a> </li> @@ -1415,7 +1415,7 @@ <li> <a class="" href="../../reference/cordova-plugin-contacts/index.html"> - cordova-plugin-contacts + Contacts </a> </li> @@ -1424,7 +1424,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device/index.html"> - cordova-plugin-device + Device </a> </li> @@ -1433,7 +1433,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-motion/index.html"> - cordova-plugin-device-motion + Device Motion </a> </li> @@ -1442,7 +1442,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-orientation/index.html"> - cordova-plugin-device-orientation + Device Orientation </a> </li> @@ -1451,7 +1451,7 @@ <li> <a class="" href="../../reference/cordova-plugin-dialogs/index.html"> - cordova-plugin-dialogs + Dialogs </a> </li> @@ -1460,7 +1460,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file/index.html"> - cordova-plugin-file + File </a> </li> @@ -1469,7 +1469,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file-transfer/index.html"> - cordova-plugin-file-transfer + File Transfer </a> </li> @@ -1478,7 +1478,7 @@ <li> <a class="this-page" href="../../reference/cordova-plugin-geolocation/index.html"> - cordova-plugin-geolocation + Geolocation </a> </li> @@ -1487,7 +1487,7 @@ <li> <a class="" href="../../reference/cordova-plugin-globalization/index.html"> - cordova-plugin-globalization + Globalization </a> </li> @@ -1496,7 +1496,7 @@ <li> <a class="" href="../../reference/cordova-plugin-inappbrowser/index.html"> - cordova-plugin-inappbrowser + Inappbrowser </a> </li> @@ -1505,7 +1505,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media/index.html"> - cordova-plugin-media + Media </a> </li> @@ -1514,7 +1514,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media-capture/index.html"> - cordova-plugin-media-capture + Media Capture </a> </li> @@ -1523,7 +1523,7 @@ <li> <a class="" href="../../reference/cordova-plugin-network-information/index.html"> - cordova-plugin-network-information + Network Information </a> </li> @@ -1532,7 +1532,7 @@ <li> <a class="" href="../../reference/cordova-plugin-splashscreen/index.html"> - cordova-plugin-splashscreen + Splashscreen </a> </li> @@ -1541,7 +1541,7 @@ <li> <a class="" href="../../reference/cordova-plugin-vibration/index.html"> - cordova-plugin-vibration + Vibration </a> </li> @@ -1550,7 +1550,7 @@ <li> <a class="" href="../../reference/cordova-plugin-statusbar/index.html"> - cordova-plugin-statusbar + Statusbar </a> </li> @@ -1559,7 +1559,7 @@ <li> <a class="" href="../../reference/cordova-plugin-whitelist/index.html"> - cordova-plugin-whitelist + Whitelist </a> </li> @@ -1568,7 +1568,7 @@ <li> <a class="" href="../../reference/cordova-plugin-legacy-whitelist/index.html"> - cordova-plugin-legacy-whitelist + Legacy Whitelist </a> </li> @@ -2688,17 +2688,41 @@ # under the License. --> -<p><a href="https://travis-ci.org/apache/cordova-plugin-geolocation"><img src="https://travis-ci.org/apache/cordova-plugin-geolocation.svg?branch=master" alt="Build Status"></a></p> +<table><thead> +<tr> +<th style="text-align: center">Android</th> +<th style="text-align: center">iOS</th> +<th style="text-align: center">Windows 8.1 Store</th> +<th style="text-align: center">Windows 8.1 Phone</th> +<th style="text-align: center">Windows 10 Store</th> +<th style="text-align: center">Travis CI</th> +</tr> +</thead><tbody> +<tr> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-geolocation/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-geolocation" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-geolocation/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-geolocation" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-geolocation/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-geolocation" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-geolocation/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-geolocation" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-geolocation/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-geolocation" alt="Build Status"></a></td> +<td style="text-align: center"><a href="https://travis-ci.org/apache/cordova-plugin-geolocation"><img src="https://travis-ci.org/apache/cordova-plugin-geolocation.svg?branch=master" alt="Build Status"></a></td> +</tr> +</tbody></table> <h1>cordova-plugin-geolocation</h1> <p>This plugin provides information about the device's location, such as -latitude and longitude. Common sources of location information include +latitude and longitude.</p> + +<p>Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. There is no guarantee that the API returns the device's actual location.</p> +<blockquote> +<p>To get a few ideas, check out the <a href="#sample">sample</a> at the bottom of this page or go straight to the <a href="#reference">reference</a> content.</p> +</blockquote> + <p>This API is based on the <a href="http://dev.w3.org/geo/api/spec-source.html">W3C Geolocation API Specification</a>, and only executes on devices that don't already provide an implementation.</p> @@ -2723,11 +2747,15 @@ where it is otherwise missing).</p> <p>Although the object is in the global scope, features provided by this plugin are not available until after the <code>deviceready</code> event.</p> -<div class="highlight"><pre><code class="language-" data-lang="">document.addEventListener("deviceready", onDeviceReady, false); -function onDeviceReady() { - console.log("navigator.geolocation works well"); -} +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> + <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"deviceready"</span><span class="p">,</span> <span class="nx">onDeviceReady</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span> + <span class="kd">function</span> <span class="nx">onDeviceReady</span><span class="p">()</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"navigator.geolocation works well"</span><span class="p">);</span> + <span class="p">}</span> + </code></pre></div> +<h2><a id="reference"></a>Reference</h2> + <h2>Installation</h2> <p>This requires cordova 5.0+ ( current stable 1.0.0 )</p> @@ -2787,29 +2815,31 @@ error, the <code>geolocationError</code> </ul> <h3>Example</h3> -<div class="highlight"><pre><code class="language-" data-lang="">// onSuccess Callback -// This method accepts a Position object, which contains the -// current GPS coordinates -// -var onSuccess = function(position) { - alert('Latitude: ' + position.coords.latitude + '\n' + - 'Longitude: ' + position.coords.longitude + '\n' + - 'Altitude: ' + position.coords.altitude + '\n' + - 'Accuracy: ' + position.coords.accuracy + '\n' + - 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' + - 'Heading: ' + position.coords.heading + '\n' + - 'Speed: ' + position.coords.speed + '\n' + - 'Timestamp: ' + position.timestamp + '\n'); -}; - -// onError Callback receives a PositionError object -// -function onError(error) { - alert('code: ' + error.code + '\n' + - 'message: ' + error.message + '\n'); -} +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> + <span class="c1">// onSuccess Callback</span> + <span class="c1">// This method accepts a Position object, which contains the</span> + <span class="c1">// current GPS coordinates</span> + <span class="c1">//</span> + <span class="kd">var</span> <span class="nx">onSuccess</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">alert</span><span class="p">(</span><span class="s1">'Latitude: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Longitude: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Altitude: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">altitude</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Accuracy: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">accuracy</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Altitude Accuracy: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">altitudeAccuracy</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Heading: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">heading</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Speed: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">speed</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'Timestamp: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">timestamp</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> + <span class="p">};</span> + + <span class="c1">// onError Callback receives a PositionError object</span> + <span class="c1">//</span> + <span class="kd">function</span> <span class="nx">onError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">alert</span><span class="p">(</span><span class="s1">'code: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'message: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> + <span class="p">}</span> + + <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span><span class="p">(</span><span class="nx">onSuccess</span><span class="p">,</span> <span class="nx">onError</span><span class="p">);</span> -navigator.geolocation.getCurrentPosition(onSuccess, onError); </code></pre></div> <h3>Android Quirks</h3> @@ -2842,27 +2872,29 @@ there is an error, the <code>geolocation </ul> <h3>Example</h3> -<div class="highlight"><pre><code class="language-" data-lang="">// onSuccess Callback -// This method accepts a `Position` object, which contains -// the current GPS coordinates -// -function onSuccess(position) { - var element = document.getElementById('geolocation'); - element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + - 'Longitude: ' + position.coords.longitude + '<br />' + - '<hr />' + element.innerHTML; -} - -// onError Callback receives a PositionError object -// -function onError(error) { - alert('code: ' + error.code + '\n' + - 'message: ' + error.message + '\n'); -} - -// Options: throw an error if no update is received every 30 seconds. -// -var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 30000 }); +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> + <span class="c1">// onSuccess Callback</span> + <span class="c1">// This method accepts a `Position` object, which contains</span> + <span class="c1">// the current GPS coordinates</span> + <span class="c1">//</span> + <span class="kd">function</span> <span class="nx">onSuccess</span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'geolocation'</span><span class="p">);</span> + <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">'Latitude: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span> <span class="o">+</span> <span class="s1">'<br />'</span> <span class="o">+</span> + <span class="s1">'Longitude: '</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span> <span class="o">+</span> <span class="s1">'<br />'</span> <span class="o">+</span> + <span class="s1">'<hr />'</span> <span class="o">+</span> <span class="nx">element</span><span class="p">.</span><span class="nx">innerHTML</span><span class="p">;</span> + <span class="p">}</span> + + <span class="c1">// onError Callback receives a PositionError object</span> + <span class="c1">//</span> + <span class="kd">function</span> <span class="nx">onError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">alert</span><span class="p">(</span><span class="s1">'code: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'message: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> + <span class="p">}</span> + + <span class="c1">// Options: throw an error if no update is received every 30 seconds.</span> + <span class="c1">//</span> + <span class="kd">var</span> <span class="nx">watchID</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span><span class="nx">onSuccess</span><span class="p">,</span> <span class="nx">onError</span><span class="p">,</span> <span class="p">{</span> <span class="na">timeout</span><span class="p">:</span> <span class="mi">30000</span> <span class="p">});</span> + </code></pre></div> <h2>geolocationOptions</h2> @@ -2896,14 +2928,16 @@ If <code>timeout</code> parameter is not </ul> <h3>Example</h3> -<div class="highlight"><pre><code class="language-" data-lang="">// Options: watch for changes in position, and use the most -// accurate position acquisition method available. -// -var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true }); +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> + <span class="c1">// Options: watch for changes in position, and use the most</span> + <span class="c1">// accurate position acquisition method available.</span> + <span class="c1">//</span> + <span class="kd">var</span> <span class="nx">watchID</span> <span class="o">=</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span><span class="p">(</span><span class="nx">onSuccess</span><span class="p">,</span> <span class="nx">onError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> + + <span class="c1">// ...later on...</span> -// ...later on... + <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">clearWatch</span><span class="p">(</span><span class="nx">watchID</span><span class="p">);</span> -navigator.geolocation.clearWatch(watchID); </code></pre></div> <h2>Position</h2> @@ -2974,6 +3008,420 @@ callback function when an error occurs w </ul></li> </ul> +<h2><a id="sample"></a>Sample: Get the weather, find stores, and see photos of things nearby with Geolocation</h2> + +<p>Use this plugin to help users find things near them such as Groupon deals, houses for sale, movies playing, sports and entertainment events and more.</p> + +<p>Here's a "cookbook" of ideas to get you started. In the snippets below, we'll show you some basic ways to add these features to your app.</p> + +<ul> +<li><a href="#coords">Get your coordinates</a>.</li> +<li><a href="#weather">Get the weather forecast</a>.</li> +<li><a href="#receive">Receive updated weather forecasts as you drive around</a>.</li> +<li><a href="#see">See where you are on a map</a>.</li> +<li><a href="#find">Find stores near you</a>.</li> +<li><a href="#see">See pictures of things around you</a>.</li> +</ul> + +<h2><a id="coord"></a>Get your geolocation coordinates</h2> +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> +<span class="kd">function</span> <span class="nx">getWeatherLocation</span><span class="p">()</span> <span class="p">{</span> + + <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span> + <span class="p">(</span><span class="nx">onWeatherSuccess</span><span class="p">,</span> <span class="nx">onWeatherError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +</code></pre></div> +<h2><a id="weather"></a>Get the weather forecast</h2> +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> +<span class="c1">// Success callback for get geo coordinates</span> + +<span class="kd">var</span> <span class="nx">onWeatherSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="nx">getWeather</span><span class="p">(</span><span class="nx">Latitude</span><span class="p">,</span> <span class="nx">Longitude</span><span class="p">);</span> +<span class="p">}</span> + +<span class="c1">// Get weather by using coordinates</span> + +<span class="kd">function</span> <span class="nx">getWeather</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="c1">// Get a free key at http://openweathermap.org/. Replace the "Your_Key_Here" string with that key.</span> + <span class="kd">var</span> <span class="nx">OpenWeatherAppKey</span> <span class="o">=</span> <span class="s2">"Your_Key_Here"</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> + <span class="s1">'http://api.openweathermap.org/data/2.5/weather?lat='</span> + <span class="o">+</span> <span class="nx">latitude</span> <span class="o">+</span> <span class="s1">'&lon='</span> <span class="o">+</span> <span class="nx">longitude</span> <span class="o">+</span> <span class="s1">'&appid='</span> <span class="o">+</span> <span class="nx">OpenWeatherAppKey</span> <span class="o">+</span> <span class="s1">'&units=imperial'</span><span class="p">;</span> + + <span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">queryString</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">weather</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">queryString</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">weather</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">$</span><span class="p">(</span><span class="s1">'#description'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> + <span class="nx">$</span><span class="p">(</span><span class="s1">'#temp'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">main</span><span class="p">.</span><span class="nx">temp</span><span class="p">);</span> + <span class="nx">$</span><span class="p">(</span><span class="s1">'#wind'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">wind</span><span class="p">.</span><span class="nx">speed</span><span class="p">);</span> + <span class="nx">$</span><span class="p">(</span><span class="s1">'#humidity'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">main</span><span class="p">.</span><span class="nx">humidity</span><span class="p">);</span> + <span class="nx">$</span><span class="p">(</span><span class="s1">'#visibility'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">weather</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">main</span><span class="p">);</span> + + <span class="kd">var</span> <span class="nx">sunriseDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">sys</span><span class="p">.</span><span class="nx">sunrise</span><span class="p">);</span> + <span class="nx">$</span><span class="p">(</span><span class="s1">'#sunrise'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">sunriseDate</span><span class="p">.</span><span class="nx">toLocaleTimeString</span><span class="p">());</span> + + <span class="kd">var</span> <span class="nx">sunsetDate</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">sys</span><span class="p">.</span><span class="nx">sunrise</span><span class="p">);</span> + <span class="nx">$</span><span class="p">(</span><span class="s1">'#sunset'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">sunsetDate</span><span class="p">.</span><span class="nx">toLocaleTimeString</span><span class="p">());</span> + <span class="p">}</span> + + <span class="p">});</span> + <span class="p">}</span> + <span class="p">}).</span><span class="nx">fail</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"error getting location"</span><span class="p">);</span> + <span class="p">});</span> +<span class="p">}</span> + +<span class="c1">// Error callback</span> + +<span class="kd">function</span> <span class="nx">onWeatherError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'code: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'message: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> +<span class="p">}</span> + +</code></pre></div> +<h2><a id="receive"></a>Receive updated weather forecasts as you drive around</h2> +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> +<span class="c1">// Watch your changing position</span> + +<span class="kd">function</span> <span class="nx">watchWeatherPosition</span><span class="p">()</span> <span class="p">{</span> + + <span class="k">return</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span> + <span class="p">(</span><span class="nx">onWeatherWatchSuccess</span><span class="p">,</span> <span class="nx">onWeatherError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +<span class="c1">// Success callback for watching your changing position</span> + +<span class="kd">var</span> <span class="nx">onWeatherWatchSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">updatedLatitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">updatedLongitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">updatedLatitude</span> <span class="o">!=</span> <span class="nx">Latitude</span> <span class="o">&&</span> <span class="nx">updatedLongitude</span> <span class="o">!=</span> <span class="nx">Longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">updatedLatitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">updatedLongitude</span><span class="p">;</span> + + <span class="c1">// Calls function we defined earlier.</span> + <span class="nx">getWeather</span><span class="p">(</span><span class="nx">updatedLatitude</span><span class="p">,</span> <span class="nx">updatedLongitude</span><span class="p">);</span> + <span class="p">}</span> +<span class="p">}</span> + +</code></pre></div> +<h2><a id="see"></a>See where you are on a map</h2> + +<p>Both Bing and Google have map services. We'll use Google's. You'll need a key but it's free if you're just trying things out.</p> + +<p>Add a reference to the <strong>maps</strong> service.</p> +<div class="highlight"><pre><code class="language-HTML" data-lang="HTML"> + <script src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key"></script> + +</code></pre></div> +<p>Then, add code to use it.</p> +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> +<span class="kd">var</span> <span class="nx">Latitude</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> +<span class="kd">var</span> <span class="nx">Longitude</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> + +<span class="c1">// Get geo coordinates</span> + +<span class="kd">function</span> <span class="nx">getMapLocation</span><span class="p">()</span> <span class="p">{</span> + + <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span> + <span class="p">(</span><span class="nx">onMapSuccess</span><span class="p">,</span> <span class="nx">onMapError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +<span class="c1">// Success callback for get geo coordinates</span> + +<span class="kd">var</span> <span class="nx">onMapSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="nx">getMap</span><span class="p">(</span><span class="nx">Latitude</span><span class="p">,</span> <span class="nx">Longitude</span><span class="p">);</span> + +<span class="p">}</span> + +<span class="c1">// Get map by using coordinates</span> + +<span class="kd">function</span> <span class="nx">getMap</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">mapOptions</span> <span class="o">=</span> <span class="p">{</span> + <span class="na">center</span><span class="p">:</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">),</span> + <span class="na">zoom</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> + <span class="na">mapTypeId</span><span class="p">:</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">MapTypeId</span><span class="p">.</span><span class="nx">ROADMAP</span> + <span class="p">};</span> + + <span class="nx">map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">Map</span> + <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"map"</span><span class="p">),</span> <span class="nx">mapOptions</span><span class="p">);</span> + + + <span class="kd">var</span> <span class="nx">latLong</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">);</span> + + <span class="kd">var</span> <span class="nx">marker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">Marker</span><span class="p">({</span> + <span class="na">position</span><span class="p">:</span> <span class="nx">latLong</span> + <span class="p">});</span> + + <span class="nx">marker</span><span class="p">.</span><span class="nx">setMap</span><span class="p">(</span><span class="nx">map</span><span class="p">);</span> + <span class="nx">map</span><span class="p">.</span><span class="nx">setZoom</span><span class="p">(</span><span class="mi">15</span><span class="p">);</span> + <span class="nx">map</span><span class="p">.</span><span class="nx">setCenter</span><span class="p">(</span><span class="nx">marker</span><span class="p">.</span><span class="nx">getPosition</span><span class="p">());</span> +<span class="p">}</span> + +<span class="c1">// Success callback for watching your changing position</span> + +<span class="kd">var</span> <span class="nx">onMapWatchSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">updatedLatitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">updatedLongitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">updatedLatitude</span> <span class="o">!=</span> <span class="nx">Latitude</span> <span class="o">&&</span> <span class="nx">updatedLongitude</span> <span class="o">!=</span> <span class="nx">Longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">updatedLatitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">updatedLongitude</span><span class="p">;</span> + + <span class="nx">getMap</span><span class="p">(</span><span class="nx">updatedLatitude</span><span class="p">,</span> <span class="nx">updatedLongitude</span><span class="p">);</span> + <span class="p">}</span> +<span class="p">}</span> + +<span class="c1">// Error callback</span> + +<span class="kd">function</span> <span class="nx">onMapError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'code: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'message: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> +<span class="p">}</span> + +<span class="c1">// Watch your changing position</span> + +<span class="kd">function</span> <span class="nx">watchMapPosition</span><span class="p">()</span> <span class="p">{</span> + + <span class="k">return</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span> + <span class="p">(</span><span class="nx">onMapWatchSuccess</span><span class="p">,</span> <span class="nx">onMapError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +</code></pre></div> +<h2><a id="find"></a>Find stores near you</h2> + +<p>You can use the same Google key for this.</p> + +<p>Add a reference to the <strong>places</strong> service.</p> +<div class="highlight"><pre><code class="language-HTML" data-lang="HTML"> +<script src= +"https://maps.googleapis.com/maps/api/js?key=Your_API_Key&libraries=places"> +</script> + +</code></pre></div> +<p>Then, add code to use it.</p> +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> +<span class="kd">var</span> <span class="nx">Map</span><span class="p">;</span> +<span class="kd">var</span> <span class="nx">Infowindow</span><span class="p">;</span> +<span class="kd">var</span> <span class="nx">Latitude</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> +<span class="kd">var</span> <span class="nx">Longitude</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> + +<span class="c1">// Get geo coordinates</span> + +<span class="kd">function</span> <span class="nx">getPlacesLocation</span><span class="p">()</span> <span class="p">{</span> + <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span> + <span class="p">(</span><span class="nx">onPlacesSuccess</span><span class="p">,</span> <span class="nx">onPlacesError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +<span class="c1">// Success callback for get geo coordinates</span> + +<span class="kd">var</span> <span class="nx">onPlacesSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="nx">getPlaces</span><span class="p">(</span><span class="nx">Latitude</span><span class="p">,</span> <span class="nx">Longitude</span><span class="p">);</span> + +<span class="p">}</span> + +<span class="c1">// Get places by using coordinates</span> + +<span class="kd">function</span> <span class="nx">getPlaces</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">latLong</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">);</span> + + <span class="kd">var</span> <span class="nx">mapOptions</span> <span class="o">=</span> <span class="p">{</span> + + <span class="na">center</span><span class="p">:</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">LatLng</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">),</span> + <span class="na">zoom</span><span class="p">:</span> <span class="mi">15</span><span class="p">,</span> + <span class="na">mapTypeId</span><span class="p">:</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">MapTypeId</span><span class="p">.</span><span class="nx">ROADMAP</span> + + <span class="p">};</span> + + <span class="nx">Map</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">Map</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"places"</span><span class="p">),</span> <span class="nx">mapOptions</span><span class="p">);</span> + + <span class="nx">Infowindow</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">InfoWindow</span><span class="p">();</span> + + <span class="kd">var</span> <span class="nx">service</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">places</span><span class="p">.</span><span class="nx">PlacesService</span><span class="p">(</span><span class="nx">Map</span><span class="p">);</span> + <span class="nx">service</span><span class="p">.</span><span class="nx">nearbySearch</span><span class="p">({</span> + + <span class="na">location</span><span class="p">:</span> <span class="nx">latLong</span><span class="p">,</span> + <span class="na">radius</span><span class="p">:</span> <span class="mi">500</span><span class="p">,</span> + <span class="na">type</span><span class="p">:</span> <span class="p">[</span><span class="s1">'store'</span><span class="p">]</span> + <span class="p">},</span> <span class="nx">foundStoresCallback</span><span class="p">);</span> + +<span class="p">}</span> + +<span class="c1">// Success callback for watching your changing position</span> + +<span class="kd">var</span> <span class="nx">onPlacesWatchSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">updatedLatitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">updatedLongitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">updatedLatitude</span> <span class="o">!=</span> <span class="nx">Latitude</span> <span class="o">&&</span> <span class="nx">updatedLongitude</span> <span class="o">!=</span> <span class="nx">Longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">updatedLatitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">updatedLongitude</span><span class="p">;</span> + + <span class="nx">getPlaces</span><span class="p">(</span><span class="nx">updatedLatitude</span><span class="p">,</span> <span class="nx">updatedLongitude</span><span class="p">);</span> + <span class="p">}</span> +<span class="p">}</span> + +<span class="c1">// Success callback for locating stores in the area</span> + +<span class="kd">function</span> <span class="nx">foundStoresCallback</span><span class="p">(</span><span class="nx">results</span><span class="p">,</span> <span class="nx">status</span><span class="p">)</span> <span class="p">{</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">status</span> <span class="o">===</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">places</span><span class="p">.</span><span class="nx">PlacesServiceStatus</span><span class="p">.</span><span class="nx">OK</span><span class="p">)</span> <span class="p">{</span> + + <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">results</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">createMarker</span><span class="p">(</span><span class="nx">results</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span> + + <span class="p">}</span> + <span class="p">}</span> +<span class="p">}</span> + +<span class="c1">// Place a pin for each store on the map</span> + +<span class="kd">function</span> <span class="nx">createMarker</span><span class="p">(</span><span class="nx">place</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">placeLoc</span> <span class="o">=</span> <span class="nx">place</span><span class="p">.</span><span class="nx">geometry</span><span class="p">.</span><span class="nx">location</span><span class="p">;</span> + + <span class="kd">var</span> <span class="nx">marker</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">Marker</span><span class="p">({</span> + <span class="na">map</span><span class="p">:</span> <span class="nx">Map</span><span class="p">,</span> + <span class="na">position</span><span class="p">:</span> <span class="nx">place</span><span class="p">.</span><span class="nx">geometry</span><span class="p">.</span><span class="nx">location</span> + <span class="p">});</span> + + <span class="nx">google</span><span class="p">.</span><span class="nx">maps</span><span class="p">.</span><span class="nx">event</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="nx">marker</span><span class="p">,</span> <span class="s1">'click'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> + + <span class="nx">Infowindow</span><span class="p">.</span><span class="nx">setContent</span><span class="p">(</span><span class="nx">place</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span> + <span class="nx">Infowindow</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">Map</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span> + + <span class="p">});</span> +<span class="p">}</span> + +<span class="c1">// Error callback</span> + +<span class="kd">function</span> <span class="nx">onPlacesError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'code: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'message: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> +<span class="p">}</span> + +<span class="c1">// Watch your changing position</span> + +<span class="kd">function</span> <span class="nx">watchPlacesPosition</span><span class="p">()</span> <span class="p">{</span> + + <span class="k">return</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span> + <span class="p">(</span><span class="nx">onPlacesWatchSuccess</span><span class="p">,</span> <span class="nx">onPlacesError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +</code></pre></div> +<h2><a id="pictures"></a>See pictures of things around you</h2> + +<p>Digital photos can contain geo coordinates that identify where the picture was taken.</p> + +<p>Use Flickr API's to find pictures that folks have taken near you. Like Google services, you'll need a key, but it's free if you just want to try things out.</p> +<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"> +<span class="kd">var</span> <span class="nx">Latitude</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> +<span class="kd">var</span> <span class="nx">Longitude</span> <span class="o">=</span> <span class="kc">undefined</span><span class="p">;</span> + +<span class="c1">// Get geo coordinates</span> + +<span class="kd">function</span> <span class="nx">getPicturesLocation</span><span class="p">()</span> <span class="p">{</span> + + <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">getCurrentPosition</span> + <span class="p">(</span><span class="nx">onPicturesSuccess</span><span class="p">,</span> <span class="nx">onPicturesError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> + +<span class="p">}</span> + +<span class="c1">// Success callback for get geo coordinates</span> + +<span class="kd">var</span> <span class="nx">onPicturesSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="nx">getPictures</span><span class="p">(</span><span class="nx">Latitude</span><span class="p">,</span> <span class="nx">Longitude</span><span class="p">);</span> +<span class="p">}</span> + +<span class="c1">// Get pictures by using coordinates</span> + +<span class="kd">function</span> <span class="nx">getPictures</span><span class="p">(</span><span class="nx">latitude</span><span class="p">,</span> <span class="nx">longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">$</span><span class="p">(</span><span class="s1">'#pictures'</span><span class="p">).</span><span class="nx">empty</span><span class="p">();</span> + + <span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span> + <span class="s2">"https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=Your_API_Key&lat="</span> + <span class="o">+</span> <span class="nx">latitude</span> <span class="o">+</span> <span class="s2">"&lon="</span> <span class="o">+</span> <span class="nx">longitude</span> <span class="o">+</span> <span class="s2">"&format=json&jsoncallback=?"</span><span class="p">;</span> + + <span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span><span class="nx">queryString</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">results</span><span class="p">)</span> <span class="p">{</span> + <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">results</span><span class="p">.</span><span class="nx">photos</span><span class="p">.</span><span class="nx">photo</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">item</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">photoURL</span> <span class="o">=</span> <span class="s2">"http://farm"</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">farm</span> <span class="o">+</span> <span class="s2">".static.flickr.com/"</span> <span class="o">+</span> + <span class="nx">item</span><span class="p">.</span><span class="nx">server</span> <span class="o">+</span> <span class="s2">"/"</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">id</span> <span class="o">+</span> <span class="s2">"_"</span> <span class="o">+</span> <span class="nx">item</span><span class="p">.</span><span class="nx">secret</span> <span class="o">+</span> <span class="s2">"_m.jpg"</span><span class="p">;</span> + + <span class="nx">$</span><span class="p">(</span><span class="s1">'#pictures'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"<img />"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"src"</span><span class="p">,</span> <span class="nx">photoURL</span><span class="p">));</span> + + <span class="p">});</span> + <span class="p">}</span> + <span class="p">);</span> +<span class="p">}</span> + +<span class="c1">// Success callback for watching your changing position</span> + +<span class="kd">var</span> <span class="nx">onPicturesWatchSuccess</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> + + <span class="kd">var</span> <span class="nx">updatedLatitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span><span class="p">;</span> + <span class="kd">var</span> <span class="nx">updatedLongitude</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> + + <span class="k">if</span> <span class="p">(</span><span class="nx">updatedLatitude</span> <span class="o">!=</span> <span class="nx">Latitude</span> <span class="o">&&</span> <span class="nx">updatedLongitude</span> <span class="o">!=</span> <span class="nx">Longitude</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">Latitude</span> <span class="o">=</span> <span class="nx">updatedLatitude</span><span class="p">;</span> + <span class="nx">Longitude</span> <span class="o">=</span> <span class="nx">updatedLongitude</span><span class="p">;</span> + + <span class="nx">getPictures</span><span class="p">(</span><span class="nx">updatedLatitude</span><span class="p">,</span> <span class="nx">updatedLongitude</span><span class="p">);</span> + <span class="p">}</span> +<span class="p">}</span> + +<span class="c1">// Error callback</span> + +<span class="kd">function</span> <span class="nx">onPicturesError</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span> + + <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'code: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">code</span> <span class="o">+</span> <span class="s1">'\n'</span> <span class="o">+</span> + <span class="s1">'message: '</span> <span class="o">+</span> <span class="nx">error</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">'\n'</span><span class="p">);</span> +<span class="p">}</span> + +<span class="c1">// Watch your changing position</span> + +<span class="kd">function</span> <span class="nx">watchPicturePosition</span><span class="p">()</span> <span class="p">{</span> + + <span class="k">return</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">geolocation</span><span class="p">.</span><span class="nx">watchPosition</span> + <span class="p">(</span><span class="nx">onPicturesWatchSuccess</span><span class="p">,</span> <span class="nx">onPicturesError</span><span class="p">,</span> <span class="p">{</span> <span class="na">enableHighAccuracy</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> +<span class="p">}</span> + +</code></pre></div> </div> </div>
Modified: cordova/site/public/docs/en/dev/reference/cordova-plugin-globalization/index.html URL: http://svn.apache.org/viewvc/cordova/site/public/docs/en/dev/reference/cordova-plugin-globalization/index.html?rev=1752402&r1=1752401&r2=1752402&view=diff ============================================================================== --- cordova/site/public/docs/en/dev/reference/cordova-plugin-globalization/index.html (original) +++ cordova/site/public/docs/en/dev/reference/cordova-plugin-globalization/index.html Wed Jul 13 11:51:10 2016 @@ -6,12 +6,12 @@ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> - <meta name="description" content=" "> + <meta name="description" content="Access locale data. "> <title> - cordova-plugin-globalization - Apache Cordova + Globalization - Apache Cordova </title> @@ -732,7 +732,7 @@ <li> <a class="" href="../../reference/cordova-plugin-battery-status/index.html"> - cordova-plugin-battery-status + Battery Status </a> @@ -747,7 +747,7 @@ <li> <a class="" href="../../reference/cordova-plugin-camera/index.html"> - cordova-plugin-camera + Camera </a> @@ -762,7 +762,7 @@ <li> <a class="" href="../../reference/cordova-plugin-console/index.html"> - cordova-plugin-console + Console </a> @@ -777,7 +777,7 @@ <li> <a class="" href="../../reference/cordova-plugin-contacts/index.html"> - cordova-plugin-contacts + Contacts </a> @@ -792,7 +792,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device/index.html"> - cordova-plugin-device + Device </a> @@ -807,7 +807,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-motion/index.html"> - cordova-plugin-device-motion + Device Motion </a> @@ -822,7 +822,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-orientation/index.html"> - cordova-plugin-device-orientation + Device Orientation </a> @@ -837,7 +837,7 @@ <li> <a class="" href="../../reference/cordova-plugin-dialogs/index.html"> - cordova-plugin-dialogs + Dialogs </a> @@ -852,7 +852,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file/index.html"> - cordova-plugin-file + File </a> @@ -867,7 +867,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file-transfer/index.html"> - cordova-plugin-file-transfer + File Transfer </a> @@ -882,7 +882,7 @@ <li> <a class="" href="../../reference/cordova-plugin-geolocation/index.html"> - cordova-plugin-geolocation + Geolocation </a> @@ -897,7 +897,7 @@ <li> <a class="this-page" href="../../reference/cordova-plugin-globalization/index.html"> - cordova-plugin-globalization + Globalization </a> <span class="entry-highlight"></span> @@ -914,7 +914,7 @@ <li> <a class="" href="../../reference/cordova-plugin-inappbrowser/index.html"> - cordova-plugin-inappbrowser + Inappbrowser </a> @@ -929,7 +929,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media/index.html"> - cordova-plugin-media + Media </a> @@ -944,7 +944,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media-capture/index.html"> - cordova-plugin-media-capture + Media Capture </a> @@ -959,7 +959,7 @@ <li> <a class="" href="../../reference/cordova-plugin-network-information/index.html"> - cordova-plugin-network-information + Network Information </a> @@ -974,7 +974,7 @@ <li> <a class="" href="../../reference/cordova-plugin-splashscreen/index.html"> - cordova-plugin-splashscreen + Splashscreen </a> @@ -989,7 +989,7 @@ <li> <a class="" href="../../reference/cordova-plugin-vibration/index.html"> - cordova-plugin-vibration + Vibration </a> @@ -1004,7 +1004,7 @@ <li> <a class="" href="../../reference/cordova-plugin-statusbar/index.html"> - cordova-plugin-statusbar + Statusbar </a> @@ -1019,7 +1019,7 @@ <li> <a class="" href="../../reference/cordova-plugin-whitelist/index.html"> - cordova-plugin-whitelist + Whitelist </a> @@ -1034,7 +1034,7 @@ <li> <a class="" href="../../reference/cordova-plugin-legacy-whitelist/index.html"> - cordova-plugin-legacy-whitelist + Legacy Whitelist </a> @@ -1388,7 +1388,7 @@ <li> <a class="" href="../../reference/cordova-plugin-battery-status/index.html"> - cordova-plugin-battery-status + Battery Status </a> </li> @@ -1397,7 +1397,7 @@ <li> <a class="" href="../../reference/cordova-plugin-camera/index.html"> - cordova-plugin-camera + Camera </a> </li> @@ -1406,7 +1406,7 @@ <li> <a class="" href="../../reference/cordova-plugin-console/index.html"> - cordova-plugin-console + Console </a> </li> @@ -1415,7 +1415,7 @@ <li> <a class="" href="../../reference/cordova-plugin-contacts/index.html"> - cordova-plugin-contacts + Contacts </a> </li> @@ -1424,7 +1424,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device/index.html"> - cordova-plugin-device + Device </a> </li> @@ -1433,7 +1433,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-motion/index.html"> - cordova-plugin-device-motion + Device Motion </a> </li> @@ -1442,7 +1442,7 @@ <li> <a class="" href="../../reference/cordova-plugin-device-orientation/index.html"> - cordova-plugin-device-orientation + Device Orientation </a> </li> @@ -1451,7 +1451,7 @@ <li> <a class="" href="../../reference/cordova-plugin-dialogs/index.html"> - cordova-plugin-dialogs + Dialogs </a> </li> @@ -1460,7 +1460,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file/index.html"> - cordova-plugin-file + File </a> </li> @@ -1469,7 +1469,7 @@ <li> <a class="" href="../../reference/cordova-plugin-file-transfer/index.html"> - cordova-plugin-file-transfer + File Transfer </a> </li> @@ -1478,7 +1478,7 @@ <li> <a class="" href="../../reference/cordova-plugin-geolocation/index.html"> - cordova-plugin-geolocation + Geolocation </a> </li> @@ -1487,7 +1487,7 @@ <li> <a class="this-page" href="../../reference/cordova-plugin-globalization/index.html"> - cordova-plugin-globalization + Globalization </a> </li> @@ -1496,7 +1496,7 @@ <li> <a class="" href="../../reference/cordova-plugin-inappbrowser/index.html"> - cordova-plugin-inappbrowser + Inappbrowser </a> </li> @@ -1505,7 +1505,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media/index.html"> - cordova-plugin-media + Media </a> </li> @@ -1514,7 +1514,7 @@ <li> <a class="" href="../../reference/cordova-plugin-media-capture/index.html"> - cordova-plugin-media-capture + Media Capture </a> </li> @@ -1523,7 +1523,7 @@ <li> <a class="" href="../../reference/cordova-plugin-network-information/index.html"> - cordova-plugin-network-information + Network Information </a> </li> @@ -1532,7 +1532,7 @@ <li> <a class="" href="../../reference/cordova-plugin-splashscreen/index.html"> - cordova-plugin-splashscreen + Splashscreen </a> </li> @@ -1541,7 +1541,7 @@ <li> <a class="" href="../../reference/cordova-plugin-vibration/index.html"> - cordova-plugin-vibration + Vibration </a> </li> @@ -1550,7 +1550,7 @@ <li> <a class="" href="../../reference/cordova-plugin-statusbar/index.html"> - cordova-plugin-statusbar + Statusbar </a> </li> @@ -1559,7 +1559,7 @@ <li> <a class="" href="../../reference/cordova-plugin-whitelist/index.html"> - cordova-plugin-whitelist + Whitelist </a> </li> @@ -1568,7 +1568,7 @@ <li> <a class="" href="../../reference/cordova-plugin-legacy-whitelist/index.html"> - cordova-plugin-legacy-whitelist + Legacy Whitelist </a> </li> @@ -2688,7 +2688,25 @@ # under the License. --> -<p><a href="https://travis-ci.org/apache/cordova-plugin-globalization"><img src="https://travis-ci.org/apache/cordova-plugin-globalization.svg?branch=master" alt="Build Status"></a></p> +<table><thead> +<tr> +<th style="text-align: center">Android</th> +<th style="text-align: center">iOS</th> +<th style="text-align: center">Windows 8.1 Store</th> +<th style="text-align: center">Windows 8.1 Phone</th> +<th style="text-align: center">Windows 10 Store</th> +<th style="text-align: center">Travis CI</th> +</tr> +</thead><tbody> +<tr> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-globalization/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=android,PLUGIN=cordova-plugin-globalization" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-globalization/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=ios,PLUGIN=cordova-plugin-globalization" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-globalization/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-store,PLUGIN=cordova-plugin-globalization" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-globalization/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-8.1-phone,PLUGIN=cordova-plugin-globalization" alt="Build Status"></a></td> +<td style="text-align: center"><a href="http://cordova-ci.cloudapp.net:8080/job/cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-globalization/"><img src="http://cordova-ci.cloudapp.net:8080/buildStatus/icon?job=cordova-periodic-build/PLATFORM=windows-10-store,PLUGIN=cordova-plugin-globalization" alt="Build Status"></a></td> +<td style="text-align: center"><a href="https://travis-ci.org/apache/cordova-plugin-globalization"><img src="https://travis-ci.org/apache/cordova-plugin-globalization.svg?branch=master" alt="Build Status"></a></td> +</tr> +</tbody></table> <h1>cordova-plugin-globalization</h1> --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@cordova.apache.org For additional commands, e-mail: commits-h...@cordova.apache.org