Membuat Maps dan Marker pada Android

Tutorial selanjutnya kita akan belajar menampilkan maps pada projek android. Sebelumnya kita sudah belajar mendapatkan kunci key api google maps. Jadi kali ini kita akan coba kunci itu untuk digunakan pada projek android kita.

Ikuti langkah-langkah berikut ini sampai selesai:

Sebelumnya kita sudah buat projek baru android studio waktu melakukan pengaturan pembatasan kunci.
Kemudian dengan projek tersebut kita teruskan saja,
Pertama yang kita lakukan yaitu install library google maps di build.gradle(Module:app), ketikan seperti berikut pada module app tersebut:

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

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

Pada AndroidManifest.xml tambahkan permission:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

1 2	<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

Masih di AndroidManifest.xml, tambahkan kode berikut pada bagian <application>

<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />
<!--
     The API key for Google Maps-based APIs.
-->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="@string/google_maps_key" />
<uses-library
    android:name="org.apache.http.legacy"
    android:required="false" />

<meta-data

android:name="com.google.android.gms.version"

android:value="@integer/google_play_services_version" />

<!--

The API key for Google Maps-based APIs.

-->

<meta-data

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

android:value="@string/google_maps_key" />

<uses-library

android:name="org.apache.http.legacy"

android:required="false" />

Pada strings.xml tambahkan api key anda:

<string name="google_maps_key">KUNCI API KEY ANDA</string>

1	<string name="google_maps_key">KUNCI API KEY ANDA</string>

Lalu pada gradle.properties tambahkan juga:

GOOGLE_MAPS_API_KEY=KUNCI API KEY ANDA

1	GOOGLE_MAPS_API_KEY=KUNCI API KEY ANDA

activity_main.xml juga ditambahkan fragment maps:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.mapwithmarker.MapsMarkerActivity" />

</RelativeLayout>

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

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

android:id="@+id/map"

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

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="com.example.mapwithmarker.MapsMarkerActivity" />

</RelativeLayout>

Selanjutnya di MainActivity.java pada public class MainActivity extends AppCompatActivity tambahkan implements OnMapReadyCallback, jadinya akan seperti berikut:

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

}

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

Habis itu buat implements methode OnMapReady, jadi seperti berikut:

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


    }


    @Override
    public void onMapReady(GoogleMap googleMap) {
        
    }
}

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

@Override

public void onMapReady(GoogleMap googleMap) {

}

Kemudian secara keseluruhan penambahan pemanggil id fragment yang ada pada activity_main.xml dan isi dari OnMapReady tersebut, seperti berikut:

package com.ivanjul.tutorialmaps;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

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;

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add a marker in Sydney, Australia,
        // and move the map's camera to the same location.
        LatLng sydney = new LatLng(-5.1992425,105.0016604);
        googleMap.addMarker(new MarkerOptions().position(sydney)
                .title("Lapangan Voly Dekat Rumah Saya"));
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }

}

package com.ivanjul.tutorialmaps;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

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;

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback{

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()

.findFragmentById(R.id.map);

mapFragment.getMapAsync(this);

}

@Override

public void onMapReady(GoogleMap googleMap) {

// Add a marker in Sydney, Australia,

// and move the map's camera to the same location.

LatLng sydney = new LatLng(-5.1992425,105.0016604);

googleMap.addMarker(new MarkerOptions().position(sydney)

.title("Lapangan Voly Dekat Rumah Saya"));

googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));

}

Setelah itu tinggal dijalankan pada android.

Selebihnya seperti itu, jika ada error bisa komentar dibawah ya. Lebih jelasnya lihat video diatas.

Sebelumnya

Selanjutnya

2 thoughts on “Membuat Maps dan Marker pada Android”

ryo

December 6, 2020 at 6:17 pm

eror di bagian method
getsupportfragmentmanager
mas oto

February 3, 2021 at 1:24 pm

untuk uji coba gratis api key apakah harus pakai credit card / VCC ya mas

M	T	W	T	F	S	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

2 thoughts on “Membuat Maps dan Marker pada Android”

Leave a Comment Cancel reply