Google Git
Sign in
apache / cordova-docs / refs/heads/asf-site / . / docs / en / 10.x / reference / cordova-plugin-geolocation / index.html
blob: 185a70fc92623706b1d0441b13913a149efd4e0a [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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="Access GPS data. ">
<title>
Geolocation - Apache Cordova
</title>
<link rel="SHORTCUT ICON" href="/favicon.ico"/>
<link rel="canonical" href="https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-geolocation/">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="stylesheet" type="text/css" href="/static/css/lib/syntax.css">
<!-- Fonts -->
<!-- For attribution information, see www/attributions.html -->
<link href='https://fonts.googleapis.com/css?family=Raleway:700,400,300,700italic,400italic,300italic' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var disqus_developer = 1; // this would set it to developer mode
</script>
<!-- JS -->
<script defer type="text/javascript" src="/static/js/lib/jquery-2.1.1.min.js"></script>
<script defer type="text/javascript" src="/static/js/lib/bootstrap.min.js"></script>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.apache.org/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</head>
<body>
<header>
<a class="scroll-point pt-top" name="top"></a>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img id="logo_top" src="/static/img/cordova-logo-newbrand.svg"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="nav_bar_center">
<ul class="nav navbar-nav">
<li class="active">
<a href="/docs/en/latest/">Documentation</a>
</li>
<li >
<a href="/plugins">Plugins</a>
</li>
<li >
<a href="/blog" id="blog_button">Blog<span class="badge" id="new_blog_count"></span></a>
</li>
<li >
<a href="/contribute">Contribute</a>
</li>
<li >
<a href="/contribute/team.html">Team</a>
</li>
<li>
<a href="/#getstarted">Get Started</a>
</li>
<li>
<form class="navbar-form navbar-right" id="header-search-form" role="search">
<div class="input-group">
</div>
</form>
</li>
</ul>
</div>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div id="_fixed_navbar_spacer" style="padding-top:50px"></div>
</header>
<div class="docs">
<!-- Table of Contents -->
<div class="hidden-xs hidden-sm site-toc-container">
<ul class="site-toc">
<li>
<span class="toc-section-heading">
Introduction
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/overview/index.html">
Overview
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Create apps
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/cli/index.html">
Create your first app
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/cli/template.html">
Templates for apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/support/index.html">
Platform support
</a>
</li>
<li>
<span class="toc-section-heading">
Develop for platforms
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/index.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/index.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/index.html">
Windows
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/osx/index.html">
OS X
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/electron/index.html">
Electron
</a>
</li>
</ul>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html">
Manage versions and platforms
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_pinning/index.html">
Platform pinning
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/config_ref/images.html">
Customize icons
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/storage/storage.html">
Store data
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html">
Manage privacy
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/security/index.html">
Manage security
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html">
Allow List
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Create plugins
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html">
Create a plugin
</a>
</li>
<li>
<span class="toc-section-heading">
Develop for platforms
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html">
Windows
</a>
</li>
</ul>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/plugman.html">
Use Plugman
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Advanced Topics
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html">
Embed Cordova in native apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/next/index.html">
Next Steps
</a>
</li>
</ul>
</li>
<li>
<span class="toc-section-heading">
Reference
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/config_ref/index.html">
Config.xml
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-cli/index.html">
CLI Reference
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html">
Hooks
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/spec.html">
Plugin.xml
</a>
</li>
<li>
<span class="toc-section-heading">
Plugin APIs
</span>
<ul class="site-toc">
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html">
Battery Status
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html">
Dialogs
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html">
Inappbrowser
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html">
Media Capture
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html">
Network Information
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html">
Screen Orientation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html">
Statusbar
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html">
Vibration
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- Page content -->
<div class="page-content-container">
<div class="page-content">
<div class="content-header">
<!-- ToC Dropdown (for XS and SM sizes only) -->
<div class="toc-dropdown dropdown visible-xs-block visible-sm-block">
<button class="btn btn-default dropdown-toggle" type="button" id="tocDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Table of Contents
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="" href="/docs/en/10.x/guide/overview/index.html">
Overview
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/cli/index.html">
Create your first app
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/cli/template.html">
Templates for apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/support/index.html">
Platform support
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/index.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/index.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/index.html">
Windows
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/osx/index.html">
OS X
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/electron/index.html">
Electron
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_plugin_versioning_ref/index.html">
Manage versions and platforms
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/platform_pinning/index.html">
Platform pinning
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/config_ref/images.html">
Customize icons
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/storage/storage.html">
Store data
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/privacy/index.html">
Manage privacy
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/security/index.html">
Manage security
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/allowlist/index.html">
Allow List
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/plugins/index.html">
Create a plugin
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/android/plugin.html">
Android
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/ios/plugin.html">
iOS
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/platforms/windows/plugin.html">
Windows
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/plugman.html">
Use Plugman
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/hybrid/webviews/index.html">
Embed Cordova in native apps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/next/index.html">
Next Steps
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/config_ref/index.html">
Config.xml
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/cordova/events/events.html">
Events
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-cli/index.html">
CLI Reference
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/guide/appdev/hooks/index.html">
Hooks
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/plugin_ref/spec.html">
Plugin.xml
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-battery-status/index.html">
Battery Status
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-camera/index.html">
Camera
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-device/index.html">
Device
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-dialogs/index.html">
Dialogs
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-file/index.html">
File
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-geolocation/index.html">
Geolocation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-inappbrowser/index.html">
Inappbrowser
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media/index.html">
Media
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-media-capture/index.html">
Media Capture
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-network-information/index.html">
Network Information
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-screen-orientation/index.html">
Screen Orientation
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-splashscreen/index.html">
Splashscreen
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-statusbar/index.html">
Statusbar
</a>
</li>
<li>
<a class="" href="/docs/en/10.x/reference/cordova-plugin-vibration/index.html">
Vibration
</a>
</li>
</ul>
</div>
<a class="edit hidden-xs hidden-sm" href="https://github.com/apache/cordova-plugin-geolocation/blob/master/README.md"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> </a>
<!-- Version dropdown -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="versionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
10.x
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="versionDropdown">
<!-- List versions available in this language -->
<li>
<a href="/docs/en/dev/" class="missing-page">
dev
</a>
</li>
<li>
<a href="/docs/en/latest/" class="missing-page">
12.x
(Latest)
</a>
</li>
<li>
<a href="/docs/en/11.x/" class="missing-page">
11.x
</a>
</li>
<li>
<a href="/docs/en/10.x/" class="missing-page">
<span class="selected">
10.x
</span>
</a>
</li>
<li>
<a href="/docs/en/9.x/" class="missing-page">
9.x
</a>
</li>
<li>
<a href="/docs/en/8.x/" class="missing-page">
8.x
</a>
</li>
<li>
<a href="/docs/en/7.x/" class="missing-page">
7.x
</a>
</li>
<li>
<a href="/docs/en/6.x/" class="missing-page">
6.x
</a>
</li>
<li>
<a href="/docs/en/5.4.0/" class="missing-page">
5.4.0
</a>
</li>
<li>
<a href="/docs/en/5.1.1/" class="missing-page">
5.1.1
</a>
</li>
<li>
<a href="/docs/en/5.0.0/" class="missing-page">
5.0.0
</a>
</li>
<li>
<a href="/docs/en/4.0.0/" class="missing-page">
4.0.0
</a>
</li>
<li>
<a href="/docs/en/3.6.0/" class="missing-page">
3.6.0
</a>
</li>
<li>
<a href="/docs/en/3.5.0/" class="missing-page">
3.5.0
</a>
</li>
<li>
<a href="/docs/en/3.4.0/" class="missing-page">
3.4.0
</a>
</li>
<li>
<a href="/docs/en/3.3.0/" class="missing-page">
3.3.0
</a>
</li>
<li>
<a href="/docs/en/3.2.0/" class="missing-page">
3.2.0
</a>
</li>
<li>
<a href="/docs/en/3.1.0/" class="missing-page">
3.1.0
</a>
</li>
<li>
<a href="/docs/en/3.0.0/" class="missing-page">
3.0.0
</a>
</li>
<li>
<a href="/docs/en/2.9.0/" class="missing-page">
2.9.0
</a>
</li>
<li>
<a href="/docs/en/2.8.0/" class="missing-page">
2.8.0
</a>
</li>
<li>
<a href="/docs/en/2.7.0/" class="missing-page">
2.7.0
</a>
</li>
<li>
<a href="/docs/en/2.6.0/" class="missing-page">
2.6.0
</a>
</li>
<li>
<a href="/docs/en/2.5.0/" class="missing-page">
2.5.0
</a>
</li>
<li>
<a href="/docs/en/2.4.0/" class="missing-page">
2.4.0
</a>
</li>
<li>
<a href="/docs/en/2.3.0/" class="missing-page">
2.3.0
</a>
</li>
<li>
<a href="/docs/en/2.2.0/" class="missing-page">
2.2.0
</a>
</li>
<li>
<a href="/docs/en/2.1.0/" class="missing-page">
2.1.0
</a>
</li>
<li>
<a href="/docs/en/2.0.0/" class="missing-page">
2.0.0
</a>
</li>
<li>
<a href="/docs/en/1.9.0/" class="missing-page">
1.9.0
</a>
</li>
<li>
<a href="/docs/en/1.8.1/" class="missing-page">
1.8.1
</a>
</li>
<li>
<a href="/docs/en/1.8.0/" class="missing-page">
1.8.0
</a>
</li>
<li>
<a href="/docs/en/1.7.0/" class="missing-page">
1.7.0
</a>
</li>
<li>
<a href="/docs/en/1.6.1/" class="missing-page">
1.6.1
</a>
</li>
<li>
<a href="/docs/en/1.6.0/" class="missing-page">
1.6.0
</a>
</li>
<li>
<a href="/docs/en/1.5.0/" class="missing-page">
1.5.0
</a>
</li>
</ul>
</div>
</div>
<!-- Show warnings for special versions -->
<!-- dev warning -->
<!-- outdated warning -->
<div class="alert docs-alert alert-danger" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
This version of the documentation is outdated!
<a href="/docs/en/latest/">
Click here for the latest released version.
</a>
</div>
<!-- plugin version warning -->
<div class="alert alert-warning docs-alert" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
master.
<a href="https://github.com/apache/cordova-plugin-geolocation/releases">
</a>
</div>
<div id="page-toc-source">
<!-- WARNING: This file is generated. See fetch_docs.js. -->
<!--
# license: Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
-->
<table>
<thead>
<tr>
<th style="text-align: center">AppVeyor</th>
<th style="text-align: center">Travis CI</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center"><a href="https://ci.appveyor.com/project/ApacheSoftwareFoundation/cordova-plugin-geolocation"><img src="https://ci.appveyor.com/api/projects/status/github/apache/cordova-plugin-geolocation?branch=master" 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&#39;s location, such as
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&#39;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>.</p>
<p><strong>WARNING</strong>: Collection and use of geolocation data
raises important privacy issues. Your app&#39;s privacy policy should
discuss how the app uses geolocation data, whether it is shared with
any other parties, and the level of precision of the data (for
example, coarse, fine, ZIP code level, etc.). Geolocation data is
generally considered sensitive because it can reveal user&#39;s
whereabouts and, if stored, the history of their travels.
Therefore, in addition to the app&#39;s privacy policy, you should
strongly consider providing a just-in-time notice before the app
accesses geolocation data (if the device operating system doesn&#39;t do
so already). That notice should provide the same information noted
above, as well as obtaining the user&#39;s permission (e.g., by presenting
choices for <strong>OK</strong> and <strong>No Thanks</strong>). For more information, please
see the <a href="http://cordova.apache.org/docs/en/latest/guide/appdev/privacy/index.html">Privacy Guide</a>.</p>
<p>This plugin defines a global <code>navigator.geolocation</code> object (for platforms
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="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">deviceready</span><span class="dl">"</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="dl">"</span><span class="s2">navigator.geolocation works well</span><span class="dl">"</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h2>Installation</h2>
<p>This requires cordova 5.0+ ( current stable 1.0.0 )</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cordova plugin add cordova-plugin-geolocation
</code></pre></div></div>
<p>Older versions of cordova can still install via the deprecated id ( stale 0.3.12 )</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cordova plugin add org.apache.cordova.geolocation
</code></pre></div></div>
<p>It is also possible to install via repo url directly ( unstable )</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cordova plugin add https://github.com/apache/cordova-plugin-geolocation.git
</code></pre></div></div>
<h2>Supported Platforms</h2>
<ul>
<li>Android</li>
<li>iOS</li>
<li>Windows</li>
</ul>
<h2>Methods</h2>
<ul>
<li>navigator.geolocation.getCurrentPosition</li>
<li>navigator.geolocation.watchPosition</li>
<li>navigator.geolocation.clearWatch</li>
</ul>
<h2>Objects (Read-Only)</h2>
<ul>
<li>Position</li>
<li>PositionError</li>
<li>Coordinates</li>
</ul>
<h2>navigator.geolocation.getCurrentPosition</h2>
<p>Returns the device&#39;s current position to the <code>geolocationSuccess</code>
callback with a <code>Position</code> object as the parameter. If there is an
error, the <code>geolocationError</code> callback is passed a
<code>PositionError</code> object.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>navigator.geolocation.getCurrentPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]);
</code></pre></div></div>
<h3>Parameters</h3>
<ul>
<li>
<p><strong>geolocationSuccess</strong>: The callback that is passed the current position.</p>
</li>
<li>
<p><strong>geolocationError</strong>: <em>(Optional)</em> The callback that executes if an error occurs.</p>
</li>
<li>
<p><strong>geolocationOptions</strong>: <em>(Optional)</em> The geolocation options.</p>
</li>
</ul>
<h3>Example</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="dl">'</span><span class="s1">Latitude: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Longitude: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Altitude: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Accuracy: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Altitude Accuracy: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Heading: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Speed: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Timestamp: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</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="dl">'</span><span class="s1">code: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">message: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
<span class="nb">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>
</code></pre></div></div>
<h3>iOS Quirks</h3>
<p>Since iOS 10 it&#39;s mandatory to provide an usage description in the <code>info.plist</code> if trying to access privacy-sensitive data. When the system prompts the user to allow access, this usage description string will displayed as part of the permission dialog box, but if you didn&#39;t provide the usage description, the app will crash before showing the dialog. Also, Apple will reject apps that access private data but don&#39;t provide an usage description.</p>
<p>This plugins requires the following usage description:</p>
<ul>
<li><code>NSLocationWhenInUseUsageDescription</code> describes the reason that the app accesses the user&#39;s location, this is used while the app is running in the foreground.</li>
<li><code>NSLocationAlwaysAndWhenInUseUsageDescription</code> describes the reason that the app is requesting access to the user’s location information at all times. Use this key if your iOS app accesses location information while running in the background and foreground.</li>
<li><code>NSLocationAlwaysUsageDescription</code> describes the reason that the app is requesting access to the user&#39;s location at all times. Use this key if your app accesses location information in the background and you deploy to a target earlier than iOS 11. For iOS 11 and later, add both <code>NSLocationAlwaysUsageDescription</code> and <code>NSLocationAlwaysAndWhenInUseUsageDescription</code> to your app’s <code>Info.plist</code> file with the same message.</li>
</ul>
<p>To add these entries into the <code>info.plist</code>, you can use the <code>edit-config</code> tag in the <code>config.xml</code> like this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge"&gt;
&lt;string&gt;need location access to find things nearby&lt;/string&gt;
&lt;/edit-config&gt;
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;edit-config target="NSLocationAlwaysAndWhenInUseUsageDescription" file="*-Info.plist" mode="merge"&gt;
&lt;string&gt;need location access to find things nearby&lt;/string&gt;
&lt;/edit-config&gt;
</code></pre></div></div>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;edit-config target="NSLocationAlwaysUsageDescription" file="*-Info.plist" mode="merge"&gt;
&lt;string&gt;need location access to find things nearby&lt;/string&gt;
&lt;/edit-config&gt;
</code></pre></div></div>
<h3>Android Quirks</h3>
<p>For historic reasons, this plugin requires GPS Hardware on Android devices, so your app will not be able to run on devices without.
If you want to use this plugin in your app, but you do not require actual GPS Hardware on the device, install the plugin using the variable <em>GPS_REQUIRED</em> set to false:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cordova plugin add cordova-plugin-geolocation --variable GPS_REQUIRED="false"
</code></pre></div></div>
<p>If Geolocation service is turned off the <code>onError</code> callback is invoked after <code>timeout</code> interval (if specified).
If <code>timeout</code> parameter is not specified then no callback is called.</p>
<h2>navigator.geolocation.watchPosition</h2>
<p>Returns the device&#39;s current position when a change in position is detected.
When the device retrieves a new location, the <code>geolocationSuccess</code>
callback executes with a <code>Position</code> object as the parameter. If
there is an error, the <code>geolocationError</code> callback executes with a
<code>PositionError</code> object as the parameter.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var watchId = navigator.geolocation.watchPosition(geolocationSuccess,
[geolocationError],
[geolocationOptions]);
</code></pre></div></div>
<h3>Parameters</h3>
<ul>
<li>
<p><strong>geolocationSuccess</strong>: The callback that is passed the current position.</p>
</li>
<li>
<p><strong>geolocationError</strong>: (Optional) The callback that executes if an error occurs.</p>
</li>
<li>
<p><strong>geolocationOptions</strong>: (Optional) The geolocation options.</p>
</li>
</ul>
<h3>Returns</h3>
<ul>
<li><strong>String</strong>: returns a watch id that references the watch position interval. The watch id should be used with <code>navigator.geolocation.clearWatch</code> to stop watching for changes in position.</li>
</ul>
<h3>Example</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="dl">'</span><span class="s1">geolocation</span><span class="dl">'</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="dl">'</span><span class="s1">Latitude: </span><span class="dl">'</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="dl">'</span><span class="s1">&lt;br /&gt;</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">Longitude: </span><span class="dl">'</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="dl">'</span><span class="s1">&lt;br /&gt;</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">&lt;hr /&gt;</span><span class="dl">'</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="dl">'</span><span class="s1">code: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">message: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</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="nb">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></div>
<h2>geolocationOptions</h2>
<p>Optional parameters to customize the retrieval of the geolocation
<code>Position</code>.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
</code></pre></div></div>
<h3>Options</h3>
<ul>
<li>
<p><strong>enableHighAccuracy</strong>: Provides a hint that the application needs the best possible results. By default, the device attempts to retrieve a <code>Position</code> using network-based methods. Setting this property to <code>true</code> tells the framework to use more accurate methods, such as satellite positioning. <em>(Boolean)</em></p>
</li>
<li>
<p><strong>timeout</strong>: The maximum length of time (milliseconds) that is allowed to pass from the call to <code>navigator.geolocation.getCurrentPosition</code> or <code>geolocation.watchPosition</code> until the corresponding <code>geolocationSuccess</code> callback executes. If the <code>geolocationSuccess</code> callback is not invoked within this time, the <code>geolocationError</code> callback is passed a <code>PositionError.TIMEOUT</code> error code. (Note that when used in conjunction with <code>geolocation.watchPosition</code>, the <code>geolocationError</code> callback could be called on an interval every <code>timeout</code> milliseconds!) <em>(Number)</em></p>
</li>
<li>
<p><strong>maximumAge</strong>: Accept a cached position whose age is no greater than the specified time in milliseconds. <em>(Number)</em></p>
</li>
</ul>
<h3>Android Quirks</h3>
<p>If Geolocation service is turned off the <code>onError</code> callback is invoked after <code>timeout</code> interval (if specified).
If <code>timeout</code> parameter is not specified then no callback is called.</p>
<h2>navigator.geolocation.clearWatch</h2>
<p>Stop watching for changes to the device&#39;s location referenced by the
<code>watchID</code> parameter.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>navigator.geolocation.clearWatch(watchID);
</code></pre></div></div>
<h3>Parameters</h3>
<ul>
<li><strong>watchID</strong>: The id of the <code>watchPosition</code> interval to clear. (String)</li>
</ul>
<h3>Example</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="nb">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>
<span class="nb">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>
</code></pre></div></div>
<h2>Position</h2>
<p>Contains <code>Position</code> coordinates and timestamp, created by the geolocation API.</p>
<h3>Properties</h3>
<ul>
<li>
<p><strong>coords</strong>: A set of geographic coordinates. <em>(Coordinates)</em></p>
</li>
<li>
<p><strong>timestamp</strong>: Creation timestamp for <code>coords</code>. <em>(DOMTimeStamp)</em></p>
</li>
</ul>
<h2>Coordinates</h2>
<p>A <code>Coordinates</code> object is attached to a <code>Position</code> object that is
available to callback functions in requests for the current position.
It contains a set of properties that describe the geographic coordinates of a position.</p>
<h3>Properties</h3>
<ul>
<li>
<p><strong>latitude</strong>: Latitude in decimal degrees. <em>(Number)</em></p>
</li>
<li>
<p><strong>longitude</strong>: Longitude in decimal degrees. <em>(Number)</em></p>
</li>
<li>
<p><strong>altitude</strong>: Height of the position in meters above the ellipsoid. <em>(Number)</em></p>
</li>
<li>
<p><strong>accuracy</strong>: Accuracy level of the latitude and longitude coordinates in meters. <em>(Number)</em></p>
</li>
<li>
<p><strong>altitudeAccuracy</strong>: Accuracy level of the altitude coordinate in meters. <em>(Number)</em></p>
</li>
<li>
<p><strong>heading</strong>: Direction of travel, specified in degrees counting clockwise relative to the true north. <em>(Number)</em></p>
</li>
<li>
<p><strong>speed</strong>: Current ground speed of the device, specified in meters per second. <em>(Number)</em></p>
</li>
</ul>
<h3>Android Quirks</h3>
<p><strong>altitudeAccuracy</strong>: Not supported by Android devices, returning <code>null</code>.</p>
<h2>PositionError</h2>
<p>The <code>PositionError</code> object is passed to the <code>geolocationError</code>
callback function when an error occurs with navigator.geolocation.</p>
<h3>Properties</h3>
<ul>
<li>
<p><strong>code</strong>: One of the predefined error codes listed below.</p>
</li>
<li>
<p><strong>message</strong>: Error message describing the details of the error encountered.</p>
</li>
</ul>
<h3>Constants</h3>
<ul>
<li><code>PositionError.PERMISSION_DENIED</code>
<ul>
<li>Returned when users do not allow the app to retrieve position information. This is dependent on the platform.</li>
</ul>
</li>
<li><code>PositionError.POSITION_UNAVAILABLE</code>
<ul>
<li>Returned when the device is unable to retrieve a position. In general, this means the device is not connected to a network or can&#39;t get a satellite fix.</li>
</ul>
</li>
<li><code>PositionError.TIMEOUT</code>
<ul>
<li>Returned when the device is unable to retrieve a position within the time specified by the <code>timeout</code> included in <code>geolocationOptions</code>. When used with <code>navigator.geolocation.watchPosition</code>, this error could be repeatedly passed to the <code>geolocationError</code> callback every <code>timeout</code> milliseconds.</li>
</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&#39;s a &quot;cookbook&quot; of ideas to get you started. In the snippets below, we&#39;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="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="kd">function</span> <span class="nx">getWeatherLocation</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">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></div>
<h2><a id="weather"></a>Get the weather forecast</h2>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="dl">"</span><span class="s2">Your_Key_Here</span><span class="dl">"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">queryString</span> <span class="o">=</span>
<span class="dl">'</span><span class="s1">http://api.openweathermap.org/data/2.5/weather?lat=</span><span class="dl">'</span>
<span class="o">+</span> <span class="nx">latitude</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">&amp;lon=</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">longitude</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">&amp;appid=</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">OpenWeatherAppKey</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">&amp;units=imperial</span><span class="dl">'</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="dl">'</span><span class="s1">#description</span><span class="dl">'</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="dl">'</span><span class="s1">#temp</span><span class="dl">'</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="dl">'</span><span class="s1">#wind</span><span class="dl">'</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="dl">'</span><span class="s1">#humidity</span><span class="dl">'</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="dl">'</span><span class="s1">#visibility</span><span class="dl">'</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="dl">'</span><span class="s1">#sunrise</span><span class="dl">'</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="dl">'</span><span class="s1">#sunset</span><span class="dl">'</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="dl">"</span><span class="s2">error getting location</span><span class="dl">"</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="dl">'</span><span class="s1">code: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">message: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h2><a id="receive"></a>Receive updated weather forecasts as you drive around</h2>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="nb">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">&amp;&amp;</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></div>
<h2><a id="see"></a>See where you are on a map</h2>
<p>Both Bing and Google have map services. We&#39;ll use Google&#39;s. You&#39;ll need a key but it&#39;s free if you&#39;re just trying things out.</p>
<p>Add a reference to the <strong>maps</strong> service.</p>
<pre><code class="language-HTML">
&lt;script src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key"&gt;&lt;/script&gt;
</code></pre>
<p>Then, add code to use it.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="nb">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="nb">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="dl">"</span><span class="s2">map</span><span class="dl">"</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">&amp;&amp;</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="dl">'</span><span class="s1">code: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">message: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</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="nb">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></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>
<pre><code class="language-HTML">
&lt;script src=
"https://maps.googleapis.com/maps/api/js?key=Your_API_Key&amp;libraries=places"&gt;
&lt;/script&gt;
</code></pre>
<p>Then, add code to use it.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="kd">var</span> <span class="nb">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="nb">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="nb">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="nb">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="dl">"</span><span class="s2">places</span><span class="dl">"</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="nb">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="dl">'</span><span class="s1">store</span><span class="dl">'</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">&amp;&amp;</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">&lt;</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="nb">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="dl">'</span><span class="s1">click</span><span class="dl">'</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="nb">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="dl">'</span><span class="s1">code: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">message: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</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="nb">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></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&#39;s to find pictures that folks have taken near you. Like Google services, you&#39;ll need a key, but it&#39;s free if you just want to try things out.</p>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<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="nb">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="dl">'</span><span class="s1">#pictures</span><span class="dl">'</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="dl">"</span><span class="s2">https://api.flickr.com/services/rest/?method=flickr.photos.search&amp;api_key=Your_API_Key&amp;lat=</span><span class="dl">"</span>
<span class="o">+</span> <span class="nx">latitude</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">&amp;lon=</span><span class="dl">"</span> <span class="o">+</span> <span class="nx">longitude</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">&amp;format=json&amp;jsoncallback=?</span><span class="dl">"</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="dl">"</span><span class="s2">http://farm</span><span class="dl">"</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="dl">"</span><span class="s2">.static.flickr.com/</span><span class="dl">"</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="dl">"</span><span class="s2">/</span><span class="dl">"</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="dl">"</span><span class="s2">_</span><span class="dl">"</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="dl">"</span><span class="s2">_m.jpg</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">#pictures</span><span class="dl">'</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">&lt;img /&gt;</span><span class="dl">"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="dl">"</span><span class="s2">src</span><span class="dl">"</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">&amp;&amp;</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="dl">'</span><span class="s1">code: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</span> <span class="o">+</span>
<span class="dl">'</span><span class="s1">message: </span><span class="dl">'</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="dl">'</span><span class="se">\n</span><span class="dl">'</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="nb">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>
</div>
<div class="row">
<div class="blue-divider"></div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<h1>More Resources</h1>
<div class="row">
<div class="col-sm-4">
<h2>General</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://projects.apache.org/project.html?cordova">Apache Project Page</a>
</li>
<li>
<a href="https://www.apache.org/dyn/closer.cgi/cordova">Source Distribution</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/licenses">License</a>
</li>
<li>
<a href="/artwork">Artwork</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h2>Development</h2>
<ul class="nav">
<li><a target="_blank" href="https://github.com/apache?utf8=%E2%9C%93&amp;q=cordova-">Source Code</a></li>
<li><a target="_blank" href="https://github.com/apache/cordova#filing-a-bug">Issue Tracker</a></li>
<li><a target="_blank" href="https://stackoverflow.com/questions/tagged/cordova">Stack Overflow</a></li>
<li><a href="/contact">Mailing List</a></li>
<li><a href="/contribute/nightly_builds.html">Nightly builds</a></li>
</ul>
</div>
<div class="col-sm-4">
<h2>Apache Software Foundation</h2>
<ul class="nav">
<li>
<a target="_blank" href="https://www.apache.org/">About ASF</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/events/current-event">Events</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/sponsorship.html">Become a Sponsor</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/foundation/thanks.html">Thanks</a>
</li>
<li>
<a target="_blank" href="https://www.apache.org/security/">Security</a>
</li>
<li>
<a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<h1>Contribute</h1>
<p style="padding-top:20px"><strong>Help Cordova move forward!</strong></p>
<p>Report bugs, improve the docs, or contribute to the code.</p>
<a href="/contribute" class="btn btn-lg btn-primary">
Learn More
</a>
<p style="padding-top:20px"> <a href="https://twitter.com/apachecordova" class="twitter-follow-button" data-show-count="false">Follow @apachecordova</a></p>
</div>
</div>
<p class="copyright_text">
Copyright &copy; 2024 <a href="https://apache.org">The Apache Software Foundation</a>, Licensed under the <a target="_blank" href="https://www.apache.org/licenses/">Apache License, Version 2.0</a>.<br/>
Apache and the Apache feather logos are <a target="_blank" href="https://www.apache.org/foundation/marks/list/">trademarks</a> of The Apache Software Foundation.
<br/>
<p>See the <a href="/attributions/">attributions page</a> for other copyright & trademark notices.</p>
</p>
</div>
</footer>
</div>
</div>
</div>
<script defer type="text/javascript" src="/static/js/lib/toc.min.js"></script>
<script defer type="text/javascript" src="/static/js/docs.js"></script>
<script defer type="text/javascript" src="/static/js/index.js"></script>
<script defer type="text/javascript" src="/static/js/twitter.js"></script>
</body>
</html>