[Android]アプリ内のマップにピンを立て、ピンにタップ機能を実装する

こんにちは、らんです!今日は前回のアプリ内にマップ表示するということに引き続いて、そこにピンを立てて、簡単なマップアプリを作る方法をお伝えします!

前回は以下に表示されるように、オーストラリア付近に地図が表示されたかと思います。

それを今度は、日本の東京駅に立ててみたいと思います。

準備

こちらをタップして、住所を緯度軽度に変化して下さい。東京駅の緯度は35.681236、 経度は139.767125と表示されました。

続いて、mapsActivity.javaを開いて、東京駅にピンを立てていきたいと思います!

javaの場合

   @Override
   public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney and move the camera
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }

上のonMapReadyというメソッドの中身を変えて、ピンを表示させていきます!

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        
        LatLng tokyo = new LatLng(35.681236, 139.767125);  //東京の緯度軽度の情報
        mMap.moveCamera(CameraUpdateFactory.newLatLng(tokyo)); //東京がマップの中心に来る
        mMap.moveCamera(CameraUpdateFactory.zoomTo(12)); //カメラのズームを調整

        mMap.addMarker(new MarkerOptions()
                .position(tokyo) //ピンの表示位置
                .title("東京駅")//ピンの表示名
                .rotation(0f) //ピンの回転
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW))//ピンの色を変える(この場合黄色)
                .draggable(true)); //ドラッグできる

        
    }

ここまで入力して、起動すると、このように東京駅にピンが表示されます!

さらに、ピンをタップする機能を実装したいと思います。

mMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
            @Override
            public boolean onMarkerClick(Marker marker) {
                String id = marker.getId(); //マーカーにidをつけるための準備

                if(id.equals("m0")) { //初めに生成したマーカーをタップした際の処理
                    Intent intent = new Intent(MapsActivity.this, TokyoActivity.class);
                    intent.putExtra("DATA_ID", id); //画面遷移する際に、idを遷移先に渡す
                    startActivity(intent);
           }
             return false;
           } 
});

先ほどのonMapReadyメソッド内に、上記のコードを追加させます。

ピンにidを与えることで、それぞれのピンを識別することができ、クリックしたときの処理も、if文を使って、それぞれのピンで分けて書くことができます!

kotlinの場合

続いてkotlinです。

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

        
        val tokyo = LatLng(35.681236, 139.767125)
        mMap!!.moveCamera(CameraUpdateFactory.newLatLng(tokyo))
        mMap!!.moveCamera(CameraUpdateFactory.zoomTo(12f))

        mMap!!.addMarker(MarkerOptions()
                .position(tokyo) //ピンの表示位置
                .title("東京駅")//ピンの表示名
                .rotation(0f) //ピンの回転
                .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW))//色を変えられる(この場合黄色)
                .draggable(true)) //ドラッグできる

        mMap!!.setOnMarkerClickListener { marker ->
            val id = marker.id

            if (id == "m0") {
                val intent = Intent(this, TokyoActivity::class.java)
                intent.putExtra("DATA_ID", id)
                startActivity(intent)

            }

            false
        }
    }

kotlinもピンの立て方、ピンの識別とタップ機能はjavaの箇所で説明した通りです!

最後まで読んでくださり、ありがとうございました!