簡単に知りたい人向け。
AndroidStudioを利用することで、簡単にGoogle Mapを利用したアプリケーションを作ることができる。
具体的にはプロジェクトツリービューを右クリックしNewからGoogle→Google Maps Activityを選択すると自動的にテンプレートやレイアウトファイルが追加され、マニフェストファイルにも自動的に追加される。基本的にやることはこれだけでいい。
次にGoogle Mapを利用するにはGoogleMap APIと呼ばれるAPIを利用するためのキーが必要になる。恐らく悪さをするようなAPIを禁止するために許可制にしていると思われる。
取得は簡単でGoogleのアカウントでログインした状態で、自動的に作れるリソースファイルに記述されているURLをブラウザに入力して表示させ必要な情報を入力するだけで簡単にキーを作成できる。
具体的には初期のファイル名では、自動的に生成されるgoogle_maps_api.xmlというファイルの中にキーを作るためのURLが7行目あたりに記載されているので、コピーしてブラウザにペーストするだけ。あとは情報をメールで受け取るかどうか、規約に同意するかどうかを入力していくだけでキーが作成されるので、google_maps_api.xmlの<string></string>の間にキーを記述してあげるだけで、このAndroidアプリからGoogle Map APIが利用できるようになる。
Google Mapを利用する方法には、このようにツリービューからGoogle Maps Activityを追加する方法と、AndroidStudioのデザイナからMapViewというUI部品を追加する方法があるが、基本的にはGoogle Map Activity(MapFragment)のほうを利用する。自分で自作してFragmentを使う場合にはMapViewをFragmentに追加するようにする。一般的にはMapFragmentで十分だと思われる。
Google Maps Activityを追加すると、自動的にMapFragmentが記述されたxmlファイルが作成されるが、これは例によってConstraintLayoutなども利用することができる。今回はこのようにレイアウトファイルを作成してみた。
このようにすると画面全体にGoogleMapを表示できるし、画面の一部だけにGoogleMapを表示させたりUI部品を表示することも可能になる。
Google Maps Activityを追加すると自動的にOnMapReadyCallbackを継承したアクティビティが作成される。onMapReadyが実装されるインターフェースで、地図に関する初期化などはそこで行う。
具体的にはプロジェクトツリービューを右クリックしNewからGoogle→Google Maps Activityを選択すると自動的にテンプレートやレイアウトファイルが追加され、マニフェストファイルにも自動的に追加される。基本的にやることはこれだけでいい。
次にGoogle Mapを利用するにはGoogleMap APIと呼ばれるAPIを利用するためのキーが必要になる。恐らく悪さをするようなAPIを禁止するために許可制にしていると思われる。
取得は簡単でGoogleのアカウントでログインした状態で、自動的に作れるリソースファイルに記述されているURLをブラウザに入力して表示させ必要な情報を入力するだけで簡単にキーを作成できる。
具体的には初期のファイル名では、自動的に生成されるgoogle_maps_api.xmlというファイルの中にキーを作るためのURLが7行目あたりに記載されているので、コピーしてブラウザにペーストするだけ。あとは情報をメールで受け取るかどうか、規約に同意するかどうかを入力していくだけでキーが作成されるので、google_maps_api.xmlの<string></string>の間にキーを記述してあげるだけで、このAndroidアプリからGoogle Map APIが利用できるようになる。
Google Mapを利用する方法には、このようにツリービューからGoogle Maps Activityを追加する方法と、AndroidStudioのデザイナからMapViewというUI部品を追加する方法があるが、基本的にはGoogle Map Activity(MapFragment)のほうを利用する。自分で自作してFragmentを使う場合にはMapViewをFragmentに追加するようにする。一般的にはMapFragmentで十分だと思われる。
Google Maps Activityを追加すると、自動的にMapFragmentが記述されたxmlファイルが作成されるが、これは例によってConstraintLayoutなども利用することができる。今回はこのようにレイアウトファイルを作成してみた。
このようにすると画面全体にGoogleMapを表示できるし、画面の一部だけにGoogleMapを表示させたりUI部品を表示することも可能になる。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:context=".MapsActivity" />
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="@id/button2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/map" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/button1" />
</android.support.constraint.ConstraintLayout>
ではアクティビティ側ではどのような記述をするか。Google Maps Activityを追加すると自動的にOnMapReadyCallbackを継承したアクティビティが作成される。onMapReadyが実装されるインターフェースで、地図に関する初期化などはそこで行う。
class MapsActivity : AppCompatActivity(), OnMapReadyCallback {
//GoogleMapのインスタンスを保持する
private lateinit var mMap: GoogleMap
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_maps)
// Obtain the SupportMapFragment and get notified when the map is ready to be used.
//FragmentManagerからMapFragmentを取得し、コールバックを設定する
val mapFragment = supportFragmentManager.findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)
}
//初期化されて利用できたときに呼ばれる
override fun onMapReady(googleMap: GoogleMap) {
//インスタンスを得られるので保持しておく
mMap = googleMap
//以下は記述する方法など
//基本的に緯度経度で場所を指定する 羽田空港と関空の位置
val hanedaAirport = LatLng(35.5554, 139.7544)
val kankuAirport = LatLng(34.4320024, 135.2303939)
//地図へのマーカーの設定方法
mMap.addMarker(MarkerOptions().position(hanedaAirport).title("羽田空港"))
//地図の移動 画面上に表示される場所を指定する
mMap.moveCamera(CameraUpdateFactory.newLatLng(hanedaAirport))
//マップのズーム絶対値指定 1: 世界 5: 大陸 10:都市 15:街路 20:建物 ぐらいのサイズ
mMap.moveCamera(CameraUpdateFactory.zoomTo(15F))
//1段階(レベル)のズーム
mMap.moveCamera(CameraUpdateFactory.zoomIn())
//複数段階のズーム
mMap.moveCamera(CameraUpdateFactory.zoomBy(2F))
//地図を移動して特定段階のズーム
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(hanedaAirport, 15F))
//指定ピクセルだけスクロール
mMap.moveCamera(CameraUpdateFactory.scrollBy(100F, 100F))
//カメラの回転、東西南北の向き、見下ろす角度などの指定
mMap.moveCamera(CameraUpdateFactory.newCameraPosition(CameraPosition.builder().let{
//位置の指定必須 ないとエラーになる
it.target(hanedaAirport)
//東西南北の指定 北を0として右回りで360度
it.bearing(90F)
//カメラの見下ろす角度の指定 真下を0として90度
it.tilt(10F)
//ズームを指定しないと元にサイズに戻されるので事実上指定必須
it.zoom(15F)
it.build()
}))
}
}