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

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

Android Studio
2021.2.1

Google Map アプリ

　
マップアプリは、簡単にIntentでアプリに飛ばしてしまうこともできます
Intentで Google Map の表示

プロジェクトで Mapアプリ選択しても簡単にできます。

ここでは、デフォルトの地図を表示させた後に
特定の緯度、経度を指定して地図を拡大ズームさせるところまで試してみます。　

目次
1. Google Map プロジェクトの作成
2. Map アプリコード
3. 緯度、経度、ズーム

Google Map プロジェクトの作成

　
プロジェクトを新規で作成するときにMAPアプリを選ぶと簡単にセットアップされます
Google Maps Activity を選択
　

Projectが作成されると AndroidManifest.xml が現れてAPIキーを取得するための
URLが表示されます。

以前はリンクが ~~google_maps_api.xml~~ にありましたが、もうありません。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...
        <!--
             TODO: Before you run your application, you need a Google Maps API key.

             To get one, follow the directions here:

                https://developers.google.com/maps/documentation/android-sdk/get-api-key

             Once you have your API key (it starts with "AIza"), define a new property in your
             project's local.properties file (e.g. MAPS_API_KEY=Aiza...), and replace the
             "YOUR_API_KEY" string in this file with "${MAPS_API_KEY}".
        -->

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

<!--

TODO: Before you run your application, you need a Google Maps API key.

To get one, follow the directions here:

https://developers.google.com/maps/documentation/android-sdk/get-api-key

Once you have your API key (it starts with "AIza"), define a new property in your

project's local.properties file (e.g. MAPS_API_KEY=Aiza...), and replace the

"YOUR_API_KEY" string in this file with "${MAPS_API_KEY}".

-->

以下の手順に沿ってAPIキーを入手します
　

x13.4 gmap 00a 100x100 - [Android & Kotlin] Google Map Activity で地図を表示

[Android] Google Maps API キーを取得

Android アプリでGoogle Mapを使うためには、GoogleからAPIキーを取得する必要があります APIキーを取得するや...

　
AndroidManifest.xml に説明がありましたが、取得したAPIキーを
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}" />

これで設定が終わったので実行すると
シドニーにマークされた地図が表示されると思います。
　

Map アプリコード

　
コードが以下のようにできています。
Google Maps Activity で作成されたままです
　
MapsActivity.kt

//package your.package.name

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

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.LatLng
import com.google.android.gms.maps.model.MarkerOptions
import com.example.testgmapsimple.databinding.ActivityMapsBinding

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

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

    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

        // 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))
    }
}

//package your.package.name

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

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.LatLng

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

import com.example.testgmapsimple.databinding.ActivityMapsBinding

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

private lateinit var mMap: GoogleMap

private lateinit var binding: ActivityMapsBinding

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

// 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))

}

　
activity_maps.xml

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

<?xml version="1.0" encoding="utf-8"?>

<fragment xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:map="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/map"

android:name="com.google.android.gms.maps.SupportMapFragment"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MapsActivity" />

ここはGoogle Map Keyを入れるだけです
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...

    <application
        ...
        tools:targetApi="31">

        <!--
             TODO: Before you run your application, you need a Google Maps API key.

             To get one, follow the directions here:

                https://developers.google.com/maps/documentation/android-sdk/get-api-key

             Once you have your API key (it starts with "AIza"), define a new property in your
             project's local.properties file (e.g. MAPS_API_KEY=Aiza...), and replace the
             "YOUR_API_KEY" string in this file with "${MAPS_API_KEY}".
        -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="${MAPS_API_KEY}" />

        <activity
            ...
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

<application

...

tools:targetApi="31">

<!--

TODO: Before you run your application, you need a Google Maps API key.

To get one, follow the directions here:

https://developers.google.com/maps/documentation/android-sdk/get-api-key

Once you have your API key (it starts with "AIza"), define a new property in your

project's local.properties file (e.g. MAPS_API_KEY=Aiza...), and replace the

"YOUR_API_KEY" string in this file with "${MAPS_API_KEY}".

-->

<meta-data

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

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

<activity

...

</activity>

</application>

</manifest>

　
APIキーが追加されています
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

緯度、経度、ズーム

　
できているコードに変更を加えてみます。緯度経度とズームの指定は

val cUpdate: CameraUpdate =
     CameraUpdateFactory.newLatLngZoom(LatLng(35.68, 139.76), 12f)

1 2	val cUpdate: CameraUpdate = CameraUpdateFactory.newLatLngZoom(LatLng(35.68, 139.76), 12f)

を使ってできます
　
MapsActivityの中のonMapReadyで設定します

...
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))

    val cUpdate: CameraUpdate =
        CameraUpdateFactory.newLatLngZoom(LatLng(35.68, 139.76), 12f)
    mMap.moveCamera(cUpdate)
}

...

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))

val cUpdate: CameraUpdate =

CameraUpdateFactory.newLatLngZoom(LatLng(35.68, 139.76), 12f)

mMap.moveCamera(cUpdate)

}