Google Maps Implementation in Android App
Do you want to add an interactive map to your Android app? Well, you’re in luck! In this tutorial, we’ll guide you through the simple process of Google Maps Implementation in Android App.
Now, we will create an android application. Then, we will create modern dashboard UI in Android app.
- Open Android Studio.
- Go to File => New => New Project. Write application name. Then, click next button.
- Select minimum SDK you need. However, we have selected 21 as minimum SDK. Then, click next button
- Then, select Empty Activity => click next => click finish.
- If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.
Now let’s set up the groundwork. Make sure you have added the below necessary dependency in your build.gradle.
|
1 |
implementation 'com.google.android.gms:play-services-maps:18.1.0' |
Now you will need Google Maps API key, watch below video for creating Google Maps API key.
Once you create your Google Maps API key then copy your key and add it in project AndroidManifest.xml file inside the application tag like below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<application ........ ........ > <activity android:name=".MainActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_MAP_API_KEY" /> </application> </manifest> |
After adding API key go to your activity_main.xml and paste the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" android:name="com.google.android.gms.maps.SupportMapFragment" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Now open your MainActivity.java and paste the below code inside your onCreate() method and make sure you MainActivity.java implements OnMapReadyCallback.
|
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 |
public class MainActivity extends AppCompatActivity implements OnMapReadyCallback { private GoogleMap myMap; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map); mapFragment.getMapAsync(MainActivity.this); } @Override public void onMapReady(@NonNull GoogleMap googleMap) { myMap = googleMap; LatLng sydney = new LatLng(-34, 151); myMap.addMarker(new MarkerOptions().position(sydney).title("Sydney")); myMap.moveCamera(CameraUpdateFactory.newLatLng(sydney)); } } |
The code snippet above finds the MapFragment in your layout and sets it up for asynchronous loading. Now, let’s handle the map when it’s ready. The onMapReady method is called when the map is ready to be used.
In the onMapReady method, we initialize the GoogleMap object and set up a marker at a specific location (Sydney, in this case). The camera is then moved to focus on that location.
Once all the steps are done run your application and you will get the Google map on your application screen.
Changing the Map Marker Color
If you want to change the marker color on map, so make below changes in your onMapReady() method.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override public void onMapReady(@NonNull GoogleMap googleMap) { myMap = googleMap; LatLng sydney = new LatLng(-34, 151); myMap.moveCamera(CameraUpdateFactory.newLatLng(sydney)); MarkerOptions options = new MarkerOptions().position(sydney).title("Sydney"); options.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN)); myMap.addMarker(options); } |
After these changes in your onMapReady() method the map marker color will be change to green, you can also select any color you want.
