Android MapViewを利用する

APIキーの取得

MapViewを利用するには予めAndroid用GoogleMapのAPIキーを取得しておく必要がある。

Google Cloud PlatformでAPIキーの取得を行っておく。

プロジェクトを作成後、APIとサービスを有効化からMaps SDK for Androidを選択すれば良い。

プロジェクトの作成　プルダウンを押下すると新規作成の項目がある。

APIとサービスの有効化　右側の+アイコンより選択画面に進める。

認証情報の欄からアクセス用のAPIキーを作成、確認できる。

app/build.gradle

google play serviceを使用する

implementation 'com.google.android.gms:play-services-maps:17.0.0'

Manifest

Manifestに取得したAPIキーを記述する。通常は専用のresourceファイルなどで記述し、.ignore指定すればよい。

<meta-data
   android:name="com.google.android.geo.API_KEY"
   android:value="ここに取得したAPIキーを記載"/>

layout

MapViewオブジェクトをそのまま使用せず、SupportMapFragmentを配置するようにする。

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          xmlns:map="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/map"
          tools:context=".MapsActivity"
          android:name="com.google.android.gms.maps.SupportMapFragment"/>

Activity

配置したSupportMapFragmentにOnMapReadyCallbackの実装を渡せばよい。

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_maps)

        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap
    }
}

カメラの移動

地図の初期位置や表示位置の変更等に使用する。

fun cameraPosition(mMap:GoogleMap){
    var defaultPosition = LatLng(35.70316439, 139.57984714)
    //カメラオブジェクト zoomレベルは小さいほど広角になっていく。
    val camera = CameraUpdateFactory.newLatLngZoom(defaultPosition, 15f)
    //カメラの移動
    mMap.moveCamera(camera)
}

ピンマーカーの設置

fun setMarker(mMap:GoogleMap){
    val options = MarkerOptions()
    options.position( LatLng(35.70436915, 139.57947137) )
    mMap.addMarker(options);
    options.position( LatLng(35.70138951, 139.5772505) )
    mMap.addMarker(options);
}

ピンマーカーのクリックイベントリスナー

選択されたmarker.idは"m"addMarkerされた順序のidentifierとなっている。 returnするbooleanはクリック時にカメラを移動するか否か。「しない」がtrueなので注意。

mMap.setOnMarkerClickListener { marker -> 
    val id = marker.id.replace("m", "").toInt()
    Toast.makeText(this, id.toString(), Toast.LENGTH_SHORT).show()
    //click時にカメラを移動する trueは移動しない
    false
}

ピンマーカーにセットしたタイトルのクリックイベントリスナー

setOnInfoWindowClickListenerを定義する

mMap.setOnInfoWindowClickListener { marker ->
    val id = marker.id.replace("m", "").toInt()
    Toast.makeText(this, id.toString(), Toast.LENGTH_SHORT).show()
}

サンプルコード

github.com

MapViewのサンプルアプリはこの本でも触れられている

リンク

リンク

リンク