Google Maps JavaScript Apiを利用し、現在地がマーカーで示されます。, マップの利用にはAPIキーの取得が必要です。 APIキーを取得するには、次の手順に従います。 1.Google Cloud Platform Comsoleに移動する。 2.プロジェクトを作成する。 3.Map JavaScript APIを有効にする。 4.Map JavaScript APIのAPIキーを取得する。 Maps Static API. Google Maps JavaScript Apiを利用し、 Google Map上に現在位置を示すサンプルを紹介します。 HTML5のGeolocation API機能により、ユーザーの位置情報を所得し、 Google Maps JavaScript Apiを利用し、現在地がマーカーで示されます。 このような形で表示できます。 マーカーをクリック(タップ)すると、その施設の名前が吹き出しで表示されます。, マップの利用にはAPIキーの取得が必要です。 東京都千代田区神田錦町3-11 Google MapsとAlteryxを活用した位置情報マッピング 実演 事前準備編. Google Maps Roads APIは、Google Maps APIのウェブサービスAPIにあたる機能の1つで、主にルートを作成したり、移動経路を調整するためのAPIです。 ここでは、そんなGoogle Maps Roads APIの主な機能や使い方、活用法などについてわかりやすく解説します。 Google Map上に現在位置を示すサンプルを紹介します。, HTML5のGeolocation API機能により、ユーザーの位置情報を所得し、 Googleマップを表示させるには APIキー が必要です。APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内でAPIキーを作成・請求先アカウントを紐づけるという作業が必要です。ここでは新しくプロジェクトを作成し、APIキー取得と請求先アカウントの設定方 … Read about the latest updates, customer stories, and tips. Directions API. Elevation API. Google Maps JavaScript Apiを利用し、 Places SDK for Android. Maps Embed API. Connect your users with information about millions of places. Google Maps JavaScript Apiを利用し、 現在位置付近のスポット情報をマーカーで示すサンプルを紹介します。 このサンプルは、現在地より半径「1km以内」の「レストラン」を検索します。 Maps JavaScript API. Add a Google Map to your site without code or quota limits. Connect your users with information about millions of places. Sign up for the Google Developers newsletter. Time Zone API. Snap-to-road functionality to accurately trace GPS breadcrumbs. Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。 今回使用するのは、以下のJavaScript API になります。 Google Maps JavaScript API | Google Developers 目次 Google マップの表示 Google … Launch Google Maps and initiate an action, like search or directions, using Travel time and distance for multiple destinations. 精興竹橋共同ビル3FTel:03-3518-9013 Help your users navigate outdoor or indoor locations using multiple views with… developers.google.com http://bashalog.c-brains.jp/17/08/25-200000.php, さらに、Google Maps JavaScript Apiは、SSL認証されているURLでなければ表示できないようです。 Places SDK for iOS. Ask a question under the google-maps tag. 表示するURLはhttps://で始まるURLにしてください。, 「近所のレストランを検索」というボタンを押すと、半径1km以内の。レストランがマップ上に表示されます。 「プレイスタイプ」というGoogle既定のカテゴリであれば表示できます。, javascriptの以下の個所でプレイスタイプを指定します。 Let'sプログラミング ©2006-2020 Buzzword Inc.. All Rights Reserved. type: ['restaurant'], ※例:病院は「hospital」 カフェは「cafe」など。 Google Maps Android API | Google Developers Build a custom map for your Android app. Maps JavaScript API. Google Maps APIを使って作成した地図上に位置を表す目印を置く場合に使用するマーカーの使い方について確認します。マーカーはオーバーレイの一つです。 Places SDK for iOS. 今回は、Google Maps API のウェブサービスのひとつ「Google Maps Roads API」の機能をご紹介いたします!, 移動中にGPSで取得した位置データを基に、移動経路を地図上に表示したいとき、そのままではGPSの測位誤差によるバラつき等で、移動した道路上を正確に示すことは難しいです。, 測位した位置をそのまま結んでも、建物の上を通過してしまったり、一部GPSを取得できなかった部分の経路が分からなかったり……, Google Maps Roads APIでは、このようなバラつきのあるGPS取得ポイントを、実際に移動していた可能性が高い道路上の地点に「スナップ」してくれる機能を提供します。, また、地点と地点の間を「補完」するようなリクエストもでき、これによって実際の移動経路を、道路の形状にあわせてスムーズに表示することが出来るようになります。, これから紹介するサンプルでは、皇居の周りを一周するような道路上の移動を想定して、あえて道路からずれた一連の位置情報を用意しました。, この位置情報をもとに、Roads APIを使って道路へのスナップを行い、実際に移動したと想定される経路を表示してみます。, 「interpolate」パラメータはデフォルトでは false であり、地点間の補完は行われません。, (元の位置情報として渡した地点に対してのみ、道路上にスナップされた地点が返されます。), 地点間を補完し、道路の形状に合わせたスムーズな経路表示を行うために、ここでは true を指定しています。, レスポンスでは、スナップされた地点の配列が「snappedPoints」として返されます。, 各地点の「location」フィールドから、スナップされた地点の緯度と経度を確認できます。, レスポンス内の各地点の「originalIndex」フィールドには、リクエストとして渡した元の地点に対応する値が入ります。, リクエスト時に「interpolate」パラメータを true とした場合、地点間の補完がされますが、補完された地点については対応する元の値が無いため、「originalIndex」フィールドもありません。, Google Maps Roads API の機能により、移動中に取得したGPS位置情報を、正確に視覚化することが出来ます。, なお、Google Maps Roads API では、スナップした地点情報をもとに、道路上の制限速度が分かる機能も提供しています。, ただしこちらは、Google Maps API プレミアムプランのライセンスを持っている場合のみ、利用可能となっています。, このようにGoogle Maps プレミアムプランでしか使えない機能というのもいくつあるんですよ^^ ぜひプレミアムプランの購入もご検討ください。お問い合わせは、以下のフォームよりお待ちしております。, マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。, 現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。, マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。 Each succeeding zoom level doubles the precision in both horizontal and vertical dimensions. Distance Matrix API. Google Maps Roads APIは、Google Maps APIのウェブサービスAPIにあたる機能の1つで、主にルートを作成したり、移動経路を調整するためのAPIです。 ここでは、そんなGoogle Maps Roads APIの主 … Maps for your native Android app. Web APIs. Up-to-date information about millions of locations. Places API. a common, cross-platform URL scheme. Roads API を使って道路へスナップする . Geolocation API. Up-to-date information about millions of locations. Maps for your native iOS app. マーカーに情報ウィンドウを表示, マーカーをドラッグ可能に設定. 表示するURLはhttps://で始まるURLにしてください。, Google Mapsに書き出しと、マーカーの出力という、シンプルなコードになります。, 簡単!フォーム送信中の誤動作を防ぐjQuery BlockUI Pluginのサンプル, 簡単!Slidebarsを使ったスマホサイト用ドロワーメニュー(左右から出るメニュー), Google Maps JavaScript Api 現在位置を取得するサンプル (Geolocation API). Roads API. 本ブログはJavaのコードで説明していますがこのたびKotlin版のコードを公開しました。こちらもご参考ください!, 位置情報は使ってもマップは表示しないアプリもあると思いますが、デバッグやアルゴリズムのパフォーマンス測定時にマップに位置情報を表示させないと位置情報の精度や取得タイミングなどが直感的にわからないのでマップは開発の早い段階から必要になってきます。この回でサンプルアプリにマップを搭載してみたいと思います。, Google Maps Android SDKの公式のドキュメントでは↓になります。, まず上の公式ページからキーを取得ボタンを押すと以下のような手順が出てくるのでそれに従いましょう。, ここで、Create a projectが選択された状態でContinueボタンをおします。, これで、My Projectという名前のプロジェクトが作られ下のような画面が表示されます。(このプロジェクト名は後で設定から変えられるのでわかりやすいようにアプリのプロジェクト名と同じにしておくことをお勧めします), この画面で、API Keyの名前(ここではAndroidLocationStarterKitとしました)を入力し、Key restrictionのところでAndroid appを選択し、AndroidアプリからしかAPI Keyを使えないようにします(この設定は各自の事情で判断してください)。, 次に、+Add package name and fingerprintというボタンを押して、package nameとSHA-1のfingerprintを入力する必要があり、これがやや面倒です。, package nameはアプリのパッケージ名です。忘れてしまった場合はプロジェクトのManifestファイルを開くと確認できます。, keytool -list -v -keystore mystore.keystoreとターミナルで入力し、SHA-1のfingerprintを取得して、ここにペーストすると書いてありますが、, デバッグビルドでは~/.android/以下にdebug.keystoreというkeystoreがあり自動的にこのkeystoreが使われています。このkeystoreファイルを指定してfingerprintを取得し、このfingerprintを登録しておけばデバッグビルドでGoolge Mapを表示することができます。, $ keytool -list -v -keystore ~/.android/debug.keystore, という文章が返ってくるのですが、パスワードは設定していないはずなのでEnterキーを押します。, すると、SHA-1フィンガプリトが表示されます。下のように2桁の16進数がコロンを挟んで20個並んだ文字列がfingerprintです。, 5F:77:F6:40:9B:E2:3D:C4:F9:65:92:4D:55:F0:1C:05:CB:36:FC:FF, これを登録し、その後は指示通り進んでいくだけでAPI Keyの文字列が取得できます。これを後で使うので控えておいてください。, (なおアプリリリース時には、リリース用のkeystoreを作ると思いますが、このkeystoreを指定して得たSHA-1フィンガープリントを使って別のAPI Keyを取得し、そちらを使う必要があります。そうしないとリリースビルドでマップが表示されなくなるので気をつけてください。), のようなmeta-data要素をManifestに追加し、”YOUR_API_KEY”の部分を取得したAPI Keyに置き換えます。必ずこのタグをタグの中に入れよるようにしましょう。下のような感じになります。, Google Mapを表示させるにはMapViewというViewをレイアウトに埋め込みます。下のような感じになります。, その後、ActivityのOnCreate()内で下のようにMapViewのインスタンスを取得します。, 下の公式ドキュメントの「MapView」というセクションに「アクティビティ ライフサイクル メソッドを、MapView クラスの対応するメソッドに転送する必要があります。」と書いてあります。, これはどういうことかというと、ActivityのonCreate()、onDestroy()、onStart()、onStop、onResume()、onPause()、onLowMemory()、onSaveInstanceState()の中で、MapViewのonCreate()、onDestroy()、onStart()、onStop、onResume()、onPause()、onLowMemory()、onSaveInstanceState()を呼んでくださいということです。, 最後にMapViewからgetMapAsyncメソッドを使ってGoogleMapオブジェクトを取得します。このメソッドを呼ぶと非同期的にOnMapReadyCallbackのonMapReadyというメソッドが呼ばれます。この中でGoogleMapオブジェクトが取得できるので、これを後で使えるようにmapというメンバー変数に格納します。, という設定をしています。自分の位置を示すインディケーターをあえて非表示にしている理由はこの後、今回は自分の位置や位置情報の精度を示す円を自分でカスタムで描画するからです。デフォルトのアイコンではなく、自分独自のグラフィックで現在位置と位置情報の制度を表現する方法をこの後説明します。, 11行目のsetOnCameraMoveStartedListenerで設定しているリスナーはは、マップの位置やズームレベルが変化した時に呼ばれるリスナーです。このリスナーの中のコードについては下の「自動ズーム」のセクションで詳しく説明します。, この後、現在地の描画、移動経路の描画、現在の位置へマップを移動&ズームさせる処理は全てこのGoogleMapオブジェクトに対して行います。, MapViewに現在の位置情報を表示するために、前回作成したLocationServiceから位置情報を受け取る必要があります。, まず上のように2つのメンバー変数をLocationServiceで宣言し、onCreateで初期化します。, 前回までのところでは、位置情報を取得する関数onLocationChangedの中で緯度経度をログに出力しているだけでしたがこのonLocationChangedを変更します。, 上の5行目〜のところで、まずisLoggingフラグを確認し、trueならばlocationListに位置情報を格納します。これは、位置情報を”ログ”している時だけlocationListに自分の移動経路を記録していくという処理になります。, 次にIntentを作り、その中に取得した位置情報を格納して、LocalBroadcastManagerを使って位置情報をブロードキャストします。, これをActivity側で受け取ることで、位置情報の更新のたびにActivityが位置情報を取得することができます。, MainActivityで、locationUpdateReceiverというBroadcastReceiverクラスのメンバーをonCreate内で下のように初期化します。onReceiveメソッドをオーバライドして、ここで先ほどのブロードキャストを受け取る処理を書きます。, これでLocationServiceからの情報をMainActivity側でリアルタイムに受信できるようになりました。, このLocationオブジェクトを下の3つのメソッドに渡し、Mapへ情報を描画していきます。, これら各メソッドによって下のようなものが最終的にマップに描画されるようになります。, 最後にもう一つ、zoomMapTo()というメソッドにLocationオブジェクトを渡しますが、これは一番最後に説明します。, 先ほどと同じようなコードなのですが、今度はユーザーの現在地の周りに位置情報の精度を表す円を描画します。GoogleMapアプリで現在地の周りに半透明の青色の円が出ますがこれと同じものです。今度はaddCircleメソッドを使います。このcenterに現在地を指定し、radius(半径)にLocationオブジェクトから取得できるaccuracyを設定します。このaccuracyという変数は精度の大きさをメートルで表示しているのでこのままCircleのraidusとして使えます。例えば精度が100メートルであれば「このLocationオブジェクトの緯度経度の位置から半径100メートル以内のどこかにユーザーがいることは確か」という意味になります。, このメソッドではユーザーの位置に赤い丸を表示しています。まず赤い丸のイメージからBitmapDescriptorクラスのオブジェクトを生成し(4行目)。これを使ってGoogleMapオブジェクトのaddMarkerメソッドを呼び出してマーカーを地図上に表示させます。2回目以降この関数が呼ばれた場合はマーカーの位置をsetPositionメソッドを使って更新します。, 次に移動経路を描画する関数を作ります。まずLocationServiceオブジェクトからlocationListを取り出します。ここにLocationServiceがログした位置情報が全て格納されているので、この中の最新の位置情報と一つ前の位置情報を取り出し、その2点の間に直線を書いていくことで移動経路を描画します。, 4行目と18行目のところで、if/else ifと分岐させていますが、これはログした位置情報が2個だけの場合と2個より多い場合に分けています。2個だけ(if locaitonList.size() == 0)ということはまだ直線が一つも地図上に引かれていないということなので、新しくPolylineオブジェクトをマップ上に追加します。Polylineとは直線の集合という意味で、このオブジェクトをマップに追加するとマップ上に線が引けます。 14行目のaddPolylineで新規にPolylineオブジェクトをMapに追加し、精製されたPolylineオブジェクトをrunningPathPolylineという変数に格納しておきます。, ログした位置情報が2個より多い場合(18行目以下)は最初に描画した際に生成したPolylineオブジェクト(runningPathPolyline)に新たに現在の位置を追加するということをしています(26行目), マップ上へのカスタムドローイングはこれで全て終わりですが、もう一つだけ実装しておきたい機能があります。ユーザーがアプリを持って移動を続けるとユーザーの場所がマップから消えてしまいます。, ユーザーをマップ上で自動追跡する機能をつけて常にユーザーがマップの中心にいるようにしましょう。, 下のような関数を追加し、位置情報が更新されるたびに呼ぶようにするとマップが最新の位置(ユーザーの現在地)にアニメーション付きで移動&ズームしてくれます。, まず4行目で、このアプリが起動後に一度でもユーザーの現在地にマップをズームさせたかのフラグ(didInitalZoom)をチェックします。まだ一度もチェックしていない場合はマップは世界全体を表示した状態になっているのでアニメーションなしで現在地に移動し、ズームレベル17.5でズームします。初回以降は16行目以降の処理になります。16行目でzoomableというフラグを見ています。このフラグはユーザーがマップに触ってから10秒間はfalseになるようになっています。これがtrueの場合だけ自動ズームします。19行目で現在地にマップをアニメーション付きで移動させます。この時ズームレベルは変えません。最後にユーザーがマップを触った状態のズームレベルを尊重します。, これでほぼ終わりですが、最後に「ユーザーがマップを触った後に10秒間zoomableフラグをfalseにする」という処理を付け加えなければなりません。先ほどActivityのOnCreateの中で、MapViewからgetMapAsyncメソッドを使ってGoogleMapオブジェクトを取得した箇所に戻ります。, ここでGoogleMapオブジェクトのsetOnCameraMoveStartedListenerを呼んでリスナーを登録します。するとマップのフォーカスが変わるたびにonCameraMoveStartedというメソッドが呼ばれるようになります。ユーザがマップに触ってフォーカスを変えた時も、プログラムからmoveCameraやanimateCamera関数を使ってマップを動かした場合もこのonCameraMoveStartedが呼ばれます。この中で渡されるreasonというパラメータを見るとどうゆう理由でマップが動いたのかがわかります。この値がGoogleMap.OnCameraMoveStartedListener.REASON_GESTUREの時はこのユーザーが触ったことによってマップが動いたということですので、この時だけ、タイマーを作成して10秒間だけzoomableフラグをfalseにします。, ”走っている自分の場所を常にマップの中心に表示させるようにマップを自動的に動かしてくれるが、ユーザーがもっとマップを拡大したり縮小したりして眺めたい時は、10秒間この自動ズームの機能が止まり、10秒後からはズームレベルはそのままに位置だけユーザを追跡する”, このzoomMapTo関数をlocationUpdateReceiverのonReceiveの最後に追加し、これで今回のすべての実装が終わりました。, お疲れ様でした!ここまでのサンプルは以下のGitHubレポジトリのコミット38d83401805970ee2b631b5dac18c2823b98b03dで見ることができます。https://github.com/mizutori/AndroidLocationStarterKit, このブログの内容に関する質問や位置情報トラッキング機能開発に関するご相談などはこちらにご連絡ください。@mizutorymizutori@goldrushcomputing.com, https://github.com/mizutori/AndroidLocationStarterKit, Simulating (Dynamic) Locations With Xcode, Simplified Android development using Simple-Stack, How Japanese People Stay Fit for Life, Without Ever Visiting a Gym, The 5 Traits People Will Secretly Adore You For, 10 Disgusting Victorian Jobs that will Make You Appreciate Yours, The Final Evangelical Reckoning of Donald Trump, MapViewのライフサイクルメソッドをActivtyクラスの各ライフサイクルメソッドから呼ぶ, 自分でマップを触って位置やズームレベルを変えたい時があるのに位置情報が取得されるたびに自分の位置にズームしてしまう。, マップが開いた時にいきなり現在地を表示していた方がかっこいいので上記の最初のズームはアニメーションさせない, 初回以降で、ユーザーがマップに触った後はしばらくの間は自動的に現在地に移動しないようにする。(ユーザーがマップのある地点(ゴール地点など)を見ているのではないかという想定をする), 初回以降で、ユーザーがしばらくマップに触っていない時だけ自動的に現在地に移動する。この時ズームレベルは変えない。(ユーザーが最後にマップに触って設定したマップのズームレベルを尊重する).