[Android & Kotlin] Google Map ズームとピンをアイコン画像に変更

Google Mapに標準のマーカーとは別のアイコンを使うとか、あるいはズームでマップ表示させるにはどうするかやってみました。

Android Studio
2021.2.1

Google Maps Activity

　
project の新規作成にて Google Maps Activity を選択することで、すぐにmapを表示できるコードが生成されKeyを入れればすぐにできます。Google Mapプロジェクトの作成はこちらを参考にしてください。
　

x13.4 gmap 00 100x100 - [Android & Kotlin] Google Map ズームとピンをアイコン画像に変更

[Android & Kotlin] Google Map Activity で地図を表示

Google Mapアプリを作る場合には、プロジェクトの新規作成でGoogle Map Activityを選択すると簡単に出来上がります。 ...

　
作成したプロジェクトに、OnMapReadyCallbackに緯度経度を入れれば、そのロケーションをマーカーを付けて表示できます。

override fun onMapReady(googleMap: GoogleMap) {
    mMap = googleMap
 
    // Add a marker in Sydney and move the camera
    val sydney = LatLng(-34.0, 151.0)
    mMap.addMarker(MarkerOptions().position(sydney).title("Marker in Sydney"))
    mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))
}

override fun onMapReady(googleMap: GoogleMap) {

mMap = googleMap

// Add a marker in Sydney and move the camera

val sydney = LatLng(-34.0, 151.0)

mMap.addMarker(MarkerOptions().position(sydney).title("Marker in Sydney"))

mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney))

}

シドニーにマークされたマップが表示されますが、皇居付近に緯度経度を変えて、更にズームアップしてみます。

また標準のマーカーをアイコン画像に変更するとこうなります。
マーカーアイコンはbitmapの画像を作ってdrawableに入れておきます。

MapsActivity.kt

//package your.package.name

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.testgmapzoomicon.databinding.ActivityMapsBinding
import com.google.android.gms.maps.CameraUpdateFactory
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.OnMapReadyCallback
import com.google.android.gms.maps.SupportMapFragment
import com.google.android.gms.maps.model.*


class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap
    private lateinit var binding: ActivityMapsBinding
    private lateinit var latlng: LatLng

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMapsBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    /**
     * Manipulates the map once available.
     * This callback is triggered when the map is ready to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user will be prompted to install
     * it inside the SupportMapFragment. This method will only be triggered once the user has
     * installed Google Play services and returned to the app.
     */
    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        // 皇居近辺の緯度経度
        // 皇居近辺の緯度経度
        val latitude = 35.68
        val longitude = 139.76

        latlng = LatLng(latitude, longitude)

        // 標準のマーカー
//        setMarker(latitude, longitude)

        // アイコン画像をマーカーに設定
        setIcon(latitude, longitude)

    }

    private fun setMarker(latitude: Double, longitude: Double) {
        val markerOptions = MarkerOptions()
        markerOptions.position(latlng)
        markerOptions.title("Marker")
        mMap.addMarker(markerOptions)

        // ズーム
        zoomMap(latitude, longitude)
    }

    private fun setIcon(latitude: Double, longitude: Double) {

        // マップに貼り付ける BitmapDescriptor生成
        // 画像は自分で適当に用意します。ここではmipmapから持ってきましたが
        val descriptor = BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher_round)

        // 貼り付設定
        val overlayOptions = GroundOverlayOptions()
        overlayOptions.image(descriptor)

        //　public GroundOverlayOptions anchor (float u, float v)
        // (0,0):top-left, (0,1):bottom-left, (1,0):top-right, (1,1):bottom-right
        overlayOptions.anchor(0.5f, 0.5f)

        // 張り付け画像の大きさ メートル単位
        // public GroundOverlayOptions	position(LatLng location, float width, float height)
        overlayOptions.position(latlng, 300f, 300f)

        // マップに貼り付け・アルファを設定
        val overlay = mMap.addGroundOverlay(overlayOptions)
        // ズーム
        zoomMap(latitude, longitude)
        assert(overlay != null)
        overlay!!.transparency = 0.0f
    }

    private fun zoomMap(latitude: Double, longitude: Double) {
        // 表示する東西南北の緯度経度を設定
        val south = latitude * (1 - 0.00005)
        val west = longitude * (1 - 0.00005)
        val north = latitude * (1 + 0.00005)
        val east = longitude * (1 + 0.00005)

        // LatLngBounds (LatLng southwest, LatLng northeast)
        val bounds = LatLngBounds.builder()
            .include(LatLng(south, west))
            .include(LatLng(north, east))
            .build()
        val width = resources.displayMetrics.widthPixels
        val height = resources.displayMetrics.heightPixels

        // static CameraUpdate.newLatLngBounds(LatLngBounds bounds, int width, int height, int padding)
        mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, width, height, 0))
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

//package your.package.name

import android.os.Bundle

import androidx.appcompat.app.AppCompatActivity

import com.example.testgmapzoomicon.databinding.ActivityMapsBinding

import com.google.android.gms.maps.CameraUpdateFactory

import com.google.android.gms.maps.GoogleMap

import com.google.android.gms.maps.OnMapReadyCallback

import com.google.android.gms.maps.SupportMapFragment

import com.google.android.gms.maps.model.*

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

private lateinit var mMap: GoogleMap

private lateinit var binding: ActivityMapsBinding

private lateinit var latlng: LatLng

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

binding = ActivityMapsBinding.inflate(layoutInflater)

setContentView(binding.root)

// Obtain the SupportMapFragment and get notified when the map is ready to be used.

val mapFragment = supportFragmentManager

.findFragmentById(R.id.map) as SupportMapFragment

mapFragment.getMapAsync(this)

}

/**

* Manipulates the map once available.

* This callback is triggered when the map is ready to be used.

* This is where we can add markers or lines, add listeners or move the camera. In this case,

* we just add a marker near Sydney, Australia.

* If Google Play services is not installed on the device, the user will be prompted to install

* it inside the SupportMapFragment. This method will only be triggered once the user has

* installed Google Play services and returned to the app.

override fun onMapReady(googleMap: GoogleMap) {

mMap = googleMap

// 皇居近辺の緯度経度

val latitude = 35.68

val longitude = 139.76

latlng = LatLng(latitude, longitude)

// 標準のマーカー

// setMarker(latitude, longitude)

// アイコン画像をマーカーに設定

setIcon(latitude, longitude)

}

private fun setMarker(latitude: Double, longitude: Double) {

val markerOptions = MarkerOptions()

markerOptions.position(latlng)

markerOptions.title("Marker")

mMap.addMarker(markerOptions)

// ズーム

zoomMap(latitude, longitude)

}

private fun setIcon(latitude: Double, longitude: Double) {

// マップに貼り付ける BitmapDescriptor生成

// 画像は自分で適当に用意します。ここではmipmapから持ってきましたが

val descriptor = BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher_round)

// 貼り付設定

val overlayOptions = GroundOverlayOptions()

overlayOptions.image(descriptor)

//　public GroundOverlayOptions anchor (float u, float v)

// (0,0):top-left, (0,1):bottom-left, (1,0):top-right, (1,1):bottom-right

overlayOptions.anchor(0.5f, 0.5f)

// 張り付け画像の大きさメートル単位

// public GroundOverlayOptions position(LatLng location, float width, float height)

overlayOptions.position(latlng, 300f, 300f)

// マップに貼り付け・アルファを設定

val overlay = mMap.addGroundOverlay(overlayOptions)

// ズーム

zoomMap(latitude, longitude)

assert(overlay != null)

overlay!!.transparency = 0.0f

}

private fun zoomMap(latitude: Double, longitude: Double) {

// 表示する東西南北の緯度経度を設定

val south = latitude * (1 - 0.00005)

val west = longitude * (1 - 0.00005)

val north = latitude * (1 + 0.00005)

val east = longitude * (1 + 0.00005)

// LatLngBounds (LatLng southwest, LatLng northeast)

val bounds = LatLngBounds.builder()

.include(LatLng(south, west))

.include(LatLng(north, east))

.build()

val width = resources.displayMetrics.widthPixels

val height = resources.displayMetrics.heightPixels

// static CameraUpdate.newLatLngBounds(LatLngBounds bounds, int width, int height, int padding)

mMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, width, height, 0))

}

local.propertiesに記述

## This file is automatically generated by Android Studio.
...
sdk.dir=C\:\\Users\\akira\\AppData\\Local\\Android\\Sdk

MAPS_API_KEY=AIzaISyBC4N47_xxxxxxxxxxxxxxxxxxxHiRwU

## This file is automatically generated by Android Studio.

...

sdk.dir=C\:\\Users\\akira\\AppData\\Local\\Android\\Sdk

MAPS_API_KEY=AIzaISyBC4N47_xxxxxxxxxxxxxxxxxxxHiRwU

AndroidManifest.xml のYOUR_API_KEY を{MAPS_API_KEY}に置き換え

<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="${MAPS_API_KEY}" />

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="${MAPS_API_KEY}" />

ズームさせマーカーをアイコンに変更すると

ズームとしてはnewLatLngZoomを使えます

mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latlng, 15f))

1	mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latlng, 15f))

　
　
関連ページ：

Google Map API キー取得
Google Map Activity で地図を表示
Google Map ズームとピンをアイコン画像に変更
Google Map マーカーの追加