Draw Polylines between markers on Google Maps v2
This tutorial explain how to Draw Polylines between markers on Google Maps v2 in android application.
1. Setup on Goggle Developer Console
1. Go to Goggle Developer Console https://console.developers.google.com/
After you gain access to the console you can start by creating your New project. I choose project name "googlemap"
2. After created project enable Google Maps Android API
Click on Google Maps Android API for enable api
Click on Enable button After successfuly enabled
3. Go to Credentials left hand side menu and create API Key
Press on create credential blue button & select API Key after that API key created dialog show press close button in this dialog.
4. After successfully created API Key add android application Package name (I choose package name com.androidlearningtutorials.googlemap) & SHA1
Check tutorial how to find SHA1 in Andriod Studio SHA1
Click on API Key 1
In Key restriction by default selected is None choose Android apps & Add package name and fingerprint
After added Add package name and fingerprint press on save button.
After successfully copy key & save on note pad these key use in android application.
2. Creating Android Project
1. Create a new project in Android Studio from File ? New Project and fill the project details.
2. Open build.gradle add Google Play Services 'com.google.android.gms:play-services:8.4.0' after adding click on Sync Now
apply plugin: 'com.android.application' android { compileSdkVersion 25 buildToolsVersion "25.0.2" defaultConfig { applicationId "com.androidlearningtutorials.googlemap" minSdkVersion 15 targetSdkVersion 25 versionCode 1 versionName "1.0" multiDexEnabled true } android { packagingOptions { exclude 'META-INF/DEPENDENCIES' exclude 'META-INF/NOTICE' exclude 'META-INF/LICENSE' } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:25.2.0' compile 'com.google.android.gms:play-services:8.4.0' }
3. Add the below permissions to AndroidManifest.xml file.
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidlearningtutorials.googlemap"> <!-- need permission for google map --> <permission android:name="com.androidlearningtutorials.googlemap.permission.MAPS_RECEIVE" android:protectionLevel="signature" /> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> <uses-library android:name="com.google.android.maps" /> <uses-permission android:name="com.androidlearningtutorials.googlemap.permission.MAPS_RECEIVE" /> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <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.gms.version" android:value="@integer/google_play_services_version" /> <!-- paste create google API Key --> <meta-data android:name="com.google.android.geo.API_KEY" android:value="AIzaSyD3S4jr6i1PSRR0N1e6ywdga75LXlCzbOg"/> </application> </manifest>
4. Now open activity_main.xml add MapFragment like as below.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <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.wap.googlegps.MapsActivity" /> </RelativeLayout>
5. Now open MainActivity.java and add the below code.
package com.androidlearningtutorials.googlemap; import android.graphics.Color; import android.support.v7.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.SupportMapFragment; import com.google.android.gms.maps.model.BitmapDescriptorFactory; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; import com.google.android.gms.maps.model.PolylineOptions; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { GoogleMap googleMap; ArrayListpointsArr = null; PolylineOptions polylineOptions; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SupportMapFragment fm = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map); googleMap = fm.getMap(); googleMap.getUiSettings().setZoomControlsEnabled(false); googleMap.getUiSettings().setCompassEnabled(true); googleMap.setPadding(0, 0, 0, 100); //collecting co-ordinate points pointsArr = new ArrayList<>(); pointsArr.add(new LatLng(28.588851, 77.3723373)); pointsArr.add(new LatLng(28.595417, 77.362102)); pointsArr.add(new LatLng(28.600768, 77.372402)); pointsArr.add(new LatLng(28.609885, 77.372917)); pointsArr.add(new LatLng(28.617872, 77.373432)); //draw polyline on google map drawPolyline(); } private void drawPolyline(){ for(int aind = 0 ; aind < pointsArr.size(); aind++){ //adding marker on google map googleMap.addMarker(new MarkerOptions() .position(pointsArr.get(aind)) .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ORANGE))); } //draw polyline polylineOptions = new PolylineOptions(); polylineOptions.color(Color.RED); polylineOptions.width(5); polylineOptions.addAll(pointsArr); googleMap.addPolyline(polylineOptions); //googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latlng, 15)); googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(pointsArr.get(2), 13)); } }
5. Run your application Output as below.