Google Map 上に表示する位置偽装トラッキングアニメーション

Android アプリ受託案件で表題の要件がありました。まずは表示まで。

ローカルホストかSSLじゃ無いと駄目らしく上手く行かないのを開発環境上で確認。余談ですが WebView 内の利用については未確認です。

index.html:25 [Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

これで現在地にマーカーを置くことに成功しました。
javascript – Geolocation: moving only google maps marker without reload the map – Stack Overflow

解決したコードで最後に参照したのがこちら。
Animate route on Google Maps – Stack Overflow

もちろんハイブリッド型なので iOS の WKWebview に埋め込んだり PWA で使う事も可です。

GoogleがホストするJSを使う

All too often, I find code similar to this when inspecting the source for public websites that use jQuery:

<script type=”text/javascript” src=”/js/jQuery.min.js”></script>

If you’re doing this on a public facing website, you are doing it wrong.

Instead, I urge you to use the Google AJAX Libraries content delivery network to serve jQuery to your users directly from Google’s network of datacenters. Doing so has several advantages over hosting jQuery on your server(s): decreased latency, increased parallelism, and better caching.

引用元: 3 reasons why you should let Google host jQuery for you – Encosia.

「遅延を減らし並列処理が行える上にキャッシュ効率が良い」ということでグーグルがホストする CDN の JavaScript ライブラリを使うことが提案されています。

パブリックDNSの場合と同様に国内のネットワークではどうなのか疑問もあるところですが、具体的に google.load() 関数を使うか、あるいは伝統的な <script> を使うかの違い(JSAPI 遅延を避けて不要な3つのHTTPリクエストを制御をできることもあり後者が勧められていますが、プロトコルを使わない記述法に注意!)についての解説もあったり、また、文末に記載されているような MicrosoftAjax.js の動向を伺いながら読んでみると面白いかもしれません。

参照:Google AJAX APIを使ってjQueryやPrototypeを読み込む | CSS Lecture