Draw Polyline in Google Maps in Android

Google Maps are used in many applications. Google Maps is developed by Google. Google Maps is generally used to track different places. Many applications use Google Maps like OLA and Uber.

We can draw a line on Google Maps. It is known as Polyline. In this tutorial, we are creating a demo of draw polyline.

Step-By-Step Implementation.


Step 1: Create a new project in the Android app development, or you can use an already created project.  


Step 2: Add dependency of razor pay in build.gradle file on Gradle scripts>Build.gradle app module and add the below dependencies.

implementation(libs.play.services.maps)

 
Step 3: Add permission to the internet in app> Androidmanifest.xml file and below code.

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

Step 4: Add the below code in In-app> Androidmanifest.xml file and below code.

<meta-data

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

android:value="Your Google map Key here" />


Step 5: Open Google Cloud and create a project or use an already created project. 


Step 6: Click On APIs & Services.


Step 7: Click On the APIs & Services button.


Step 8: Click On  APIKey1 and open the dialog. select which platform you want to use like Android, IOS, or other.


Step 9: Example Select Android mobile app development and click the add button to open the dialog in the dialog add a pack name like com. test and add the Sh1 key that gerent in Android studio.


Step 10: This key is pasted in a manifest file on meta-data.


Step 11: Create an activity_main.xml file in the layout folder.

<?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" />

Step 12: Create a MapsActivity.kt or java file in your project.

import android.graphics.Color

import android.os.Bundle

import androidx.appcompat.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.PolylineOptions

import com.test.myapplication.databinding.ActivityMapsBinding

 

class MapsActivity : AppCompatActivity(), OnMapReadyCallback {

private lateinit var mMap: GoogleMap

private lateinit var binding: ActivityMapsBinding

//Taking multiple points.

var TamWorth = LatLng(23.0225, 72.5714)

var NewCastle = LatLng(22.3039, 70.8022)

var Brisbane = LatLng(21.6417, 69.6293)

var Brisbaddne = LatLng(22.4707, 70.0577)

var Brisdbaddne = LatLng(23.0225, 72.5714)

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

 

//binding activity

binding = ActivityMapsBinding.inflate(layoutInflater)

setContentView(binding.root)

 

// create object of mapfragment

val mapFragment = supportFragmentManager

.findFragmentById(R.id.map) as SupportMapFragment

mapFragment.getMapAsync(this)

}

override fun onMapReady(googleMap: GoogleMap) {

mMap = googleMap

// on the below line we will be adding a polyline on Google Maps.

mMap.addPolyline(

PolylineOptions().add(Brisbane, NewCastle, TamWorth, Brisbane, Brisbaddne, Brisdbaddne)

.width(5f)

.color(Color.RED)

.geodesic(true)

)

//move camera on google map

googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(Brisbane, 13f))}}

Step 13: Final output of polyline draw.


Happy coding!


365Bloggy May 10, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive