<h3><strong><span style="color: #000080;">Android Google Map</span></strong></h3>
<p class="p1"><span class="s1">Android provides facility to integrate Google map in our application by using <strong><span style="color: #0000ff;">Maps SDK for Android API.</span></strong></span></p>
<p>With the <strong><span style="color: #0000ff;">Maps SDK for Android</span></strong>, you can add maps based on Google Maps data to your application. The API automatically handles access to Google Maps servers, data downloading, map display, and response to map gestures. You can also use API calls to add markers, polygons, and overlays to a basic map, and to change the user&#8217;s view of a particular map area. These objects provide additional information for map locations, and allow user interaction with the map. The API allows you to add these graphics to a map:</p>
<ul>
<li>Icons indicate a single location on the map (<strong><span style="color: #008000;">Markers</span></strong>).</li>
<li>Sets of line segments (<strong><span style="color: #008000;">Polylines</span></strong>).</li>
<li>Enclosed segments (<strong><span style="color: #008000;">Polygons</span></strong>).</li>
<li>Bitmap graphics that are tied to specific positions on the map (<strong><span style="color: #008000;">Ground Overlays</span></strong>).</li>
<li>Sets of images which are displayed on top of the base map tiles (<strong><span style="color: #008000;">Tile Overlays</span></strong>).</li>
</ul>
<p>This article aims to give knowledge about how to implement Google Maps into your applications and also covered some basic topics.</p>
<p>Let&#8217;s start creating an example of Google map integration within our app.</p>
<h3 class="h3"><strong><span style="color: #000080;">Creating New Project</span></strong></h3>
<p>1. Start Android Studio.</p>
<p>2. Create a new project as follows:</p>
<ul>
<li>If you see the <span style="color: #008000;"><strong>Welcome to Android Studio</strong></span> dialog, choose <span style="color: #008000;"><strong>Start a new Android Studio project</strong></span>, available under &#8216;Quick Start&#8217; on the right of the dialog.</li>
<li>Otherwise, click <span style="color: #008000;"><strong>File</strong></span> in the Android Studio menu bar, then <span style="color: #008000;"><strong>New</strong>, <strong>New Project</strong>.</span></li>
</ul>
<p>3. In the <span style="color: #008000;"><strong>Choose your project</strong></span> dialog, select the tab that corresponds to the platform you intended to develop for. Most users will want to keep the default <span style="color: #008000;"><strong>Phone and Tablet</strong>.</span></p>
<p>4. Select <span style="color: #008000;"><strong>Google Maps Activity</strong>,</span> then click <span style="color: #008000;"><strong>Next</strong></span>.</p>
<p><img class="alignnone size-full wp-image-1283" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.05.53.png" alt="Screenshot 2019-11-14 18.05.53" width="1806" height="1100" /></p>
<p>5. Enter your app name, package name, and project location, programming language (Java or Kotlin), and the minimum Android API level supported by your app, then click <span style="color: #008000;"><strong>Finish</strong></span>.</p>
<p><img class="alignnone size-full wp-image-1284" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.10.13.png" alt="Screenshot 2019-11-14 18.10.13" width="1804" height="1130" /></p>
<p>6. Copy the URL from <strong><span style="color: #0000ff;">google_map_api.xml</span></strong> file to generate Google map API key.</p>
<p><img class="alignnone size-full wp-image-1285" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.21.05-3276829616-1573828968230.png" alt="Screenshot 2019-11-14 18.21.05" width="1963" height="316" /></p>
<p>7. Paste the copied URL at the browser. It will open the following page.</p>
<p><img class="alignnone size-full wp-image-1286" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.24.38.png" alt="Screenshot 2019-11-14 18.24.38" width="1078" height="504" /></p>
<p>8. Click on Create API key to generate API key.</p>
<p><img class="alignnone size-full wp-image-1288" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.28.46.png" alt="Screenshot 2019-11-14 18.28.46" width="848" height="418" /></p>
<p>9. After clicking on Create API key, it will generate an API key displaying the following screen.</p>
<p><img class="alignnone size-full wp-image-1290" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.31.40.png" alt="Screenshot 2019-11-14 18.31.40" width="1592" height="796" /></p>
<p>10. Copy this generated API key and paste it in your <span style="color: #0000ff;"><strong>google_map_api.xml</strong></span> file</p>
<p><img class="alignnone size-full wp-image-1291" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot-2019-11-14-18.34.28-2238297101-1573829461234.png" alt="Screenshot 2019-11-14 18.34.28" width="1974" height="310" /></p>
<p>11. Open <span style="color: #008000;"><strong>build.gradle.</strong></span>Here you can see a new library to integrate google Maps gets added.</p>
<p><span style="color: #0000ff;"><strong>build.gradle</strong></span></p>
<pre>dependencies {
 implementation fileTree(dir: 'libs', include: ['*.jar'])
 implementation 'androidx.appcompat:appcompat:1.1.0'

 <strong><span style="color: #008000;"> //Google Map</span>
<span style="color: #0000ff;"> implementation 'com.google.android.gms:play-services-maps:17.0.0'
</span></strong> testImplementation 'junit:junit:4.12'
 androidTestImplementation 'androidx.test:runner:1.2.0'
 androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}</pre>
<p>12. Open <strong><span style="color: #008000;">AndroidManifest.xml</span></strong> file and add the below user-permissions as shown below.<br />
<strong><span style="color: #0000ff;"><em>INTERNET</em></span></strong> – To check internet connection status<br />
<strong><span style="color: #0000ff;"><em>ACCESS_COARSE_LOCATION</em></span></strong> – To determine user’s location using WiFi and mobile cell data<br />
<span style="color: #0000ff;"><strong><em>ACCESS_FINE_LOCATION</em></strong></span> – To determine user’s location using GPS, WiFi and mobile cell data</p>
<p><span style="color: #0000ff;"><strong>AndroidManifest.xml</strong></span><!--?xml version="1.0" encoding="utf-8"?--></p>
<pre><;?xml version="1.0" encoding="utf-8"?>;
<;manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.example.googlemapdemo">;

 <strong><span style="color: #008000;"> <;uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />;</span></strong>
<strong><span style="color: #008000;"> <;uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />;</span></strong>
<strong><span style="color: #008000;"> <;uses-permission android:name="android.permission.INTERNET" />;</span></strong>

 <;application
 android:allowBackup="true"
 android:icon="@mipmap/ic_launcher"
 android:label="@string/app_name"
 android:roundIcon="@mipmap/ic_launcher_round"
 android:supportsRtl="true"
 android:theme="@style/AppTheme">;


 <;activity
 android:name=".MapsActivity"
 android:label="@string/title_activity_maps">;
 <;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="@string/google_maps_key" />;
 <;/application>;



<;/manifest>;</pre>
<p>13. Google maps are implemented using <span style="color: #008000;"><strong>Support</strong><strong>MapFragment</strong></span> which is a subclass of <span style="color: #008000;"><strong>Fragment</strong></span> class. By default, the XML file that defines the app&#8217;s layout is at <strong>res/layout/activity_maps.xml</strong>. It contains the following code:</p>
<p class="h3"><strong><span style="color: #0000ff;">activity_maps.xml</span></strong><!--?xml version="1.0" encoding="utf-8"?--></p>
<pre><;?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" />;</pre>
<p>14. To get the GoogleMap object in our <span style="color: #008000;"><strong>MapsActivity.java</strong></span> class we need to implement the <strong><span style="color: #008000;">OnMapReadyCallback</span></strong> interface and override the <strong><span style="color: #008000;">onMapReady()</span></strong> callback method.</p>
<p class="h3"><strong><span style="color: #0000ff;">MapsActivity.java</span></strong></p>
<pre>package com.example.googlemapdemo;

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 androidx.fragment.app.FragmentActivity;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

 private GoogleMap mMap;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_maps);
 
 <strong><span style="color: #008000;">// Obtain the SupportMapFragment and get notified when the map is ready to be used.</span></strong>
 SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
 .findFragmentById(R.id.map);
 mapFragment.getMapAsync(this);
 }


 <strong><span style="color: #008000;">/**</span></strong>
<strong><span style="color: #008000;"> * Manipulates the map once available.</span></strong>
<strong><span style="color: #008000;"> * This callback is triggered when the map is ready to be used.</span></strong>
<strong><span style="color: #008000;"> * This is where we can add markers or lines, add listeners or move the camera. In this case,</span></strong>
<strong><span style="color: #008000;"> * we just add a marker near Sydney, Australia.</span></strong>
<strong><span style="color: #008000;"> * If Google Play services is not installed on the device, the user will be prompted to install</span></strong>
<strong><span style="color: #008000;"> * it inside the SupportMapFragment. This method will only be triggered once the user has</span></strong>
<strong><span style="color: #008000;"> * installed Google Play services and returned to the app.</span></strong>
<strong><span style="color: #008000;"> */</span></strong>
 
 @Override
 public void onMapReady(GoogleMap googleMap) {
 mMap = googleMap;

 <strong><span style="color: #008000;">// Add a marker in Sydney and move the camera</span></strong>
 LatLng sydney = new LatLng(-34, 151);
 mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
 mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
 }
}</pre>
<p>When you run your app it will look like this as shown below:</p>
<p><img class="alignnone wp-image-1292" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573738600.png" alt="Screenshot_1573738600" width="362" height="643" /></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<h3><strong><span style="color: #000080;">Changing Map Type</span></strong></h3>
<p>Google provides 4 kinds of map types <span style="color: #0000ff;"><strong>Normal</strong>, <strong>Hybrid</strong>, <strong>Satellite</strong></span> and <span style="color: #0000ff;"><strong>Terrain</strong></span>. You can toggle to any kind of map using <strong><span style="color: #008000;"><em>googleMap.setMapType()</em></span></strong> method.</p>
<pre>googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
googleMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
googleMap.setMapType(GoogleMap.MAP_TYPE_NONE);</pre>
<p><span style="color: #0000ff;"><strong>NORMAL</strong></span> <span style="color: #0000ff;"><strong>HYBRID</strong></span></p>
<h2><img class="alignnone wp-image-1295" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573741746.png" alt="Screenshot_1573741746" width="304" height="540" /> <img class="alignnone wp-image-1296" style="color: var(--color-text); font-size: 16px; font-weight: 400;" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573741785.png" alt="Screenshot_1573741785" width="304" height="540" /></h2>
<h3><img class="alignnone wp-image-1297" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573742071.png" alt="Screenshot_1573742071" width="304" height="541" /> <img class="alignnone wp-image-1298" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573742129.png" alt="Screenshot_1573742129" width="302" height="537" /></h3>
<p><span style="color: #0000ff;"><strong>SATELLITE</strong></span> <span style="color: #0000ff;"><strong>TERRAIN</strong></span></p>
<h3><span style="color: #000080;"><strong>Placing a Marker</strong></span></h3>
<p>You can place a marker on the map by using the following code.</p>
<pre><strong><span style="color: #008000;">// latitude and longitude</span></strong>
 double latitude = ;
 double longitude = ;

 <strong><span style="color: #008000;">// create marker</span></strong>
 MarkerOptions marker = new MarkerOptions().position(new LatLng(latitude, longitude)).title("Hello Maps ");

<strong><span style="color: #008000;">// adding marker</span></strong>
googleMap.addMarker(marker);</pre>
<h4><span style="color: #0000ff;"><strong> Output</strong></span></h4>
<p><img class="alignnone wp-image-1293" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573740860.png" alt="Screenshot_1573740860" width="369" height="656" /></p>
<h3><strong><span style="color: #000080;">Changing Marker Color</span></strong></h3>
<p>By default map marker color will be RED. Google maps provides some set of predefined colored icons for the marker.</p>
<pre><span style="color: #008000;"><strong>// ROSE color icon</strong></span>
marker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE));

<strong><span style="color: #008000;">// GREEN color icon</span></strong>
marker.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));</pre>
<p>You can set the following predefined colored icons for the marker:</p>
<p class="p1"><span style="color: #0000ff;"><strong> HUE_AZURE<span class="Apple-converted-space"> </span> <span class="Apple-converted-space"> </span>HUE_BLUE <span class="Apple-converted-space"> </span></strong></span></p>
<p class="p1"><span style="color: #0000ff;"><strong> HUE_CYAN <span class="Apple-converted-space"> </span> <span class="Apple-converted-space"> </span>HUE_GREEN<span class="Apple-converted-space"> </span></strong></span></p>
<p class="p1"><span style="color: #0000ff;"><strong> HUE_MAGENTA <span class="Apple-converted-space"> </span>HUE_ORANGE </strong></span></p>
<p class="p1"><span style="color: #0000ff;"><strong><span class="Apple-converted-space"> </span>HUE_RED <span class="Apple-converted-space"> </span>HUE_ROSE <span class="Apple-converted-space"> </span></strong></span></p>
<p class="p1"><span style="color: #0000ff;"><strong><span class="Apple-converted-space"> </span>HUE_VIOLET <span class="Apple-converted-space"> </span>HUE_YELLOW</strong></span></p>
<h3><strong><span style="color: #000080;">Custom Marker Icon</span></strong></h3>
<p>Apart from maps native marker icons, you can use own image to show as a marker. You can load the icon from any kind of supported sources.</p>
<p><span style="color: #0000ff;"><strong>fromAsset(String assetName)</strong></span> – Loading from assets folder<br />
<strong><span style="color: #0000ff;"><em>fromBitmap (Bitmap image)</em> </span></strong>– Loading bitmap image<br />
<em>f<strong><span style="color: #0000ff;">romFile (String path)</span></strong></em> – Loading from file<br />
<strong><span style="color: #0000ff;"><em>fromResource (int resourceId)</em></span></strong> – Loading from drawable resource</p>
<p>Below I loaded a custom marker icon from <span style="color: #008000;"><strong>drawable</strong></span> folder</p>
<pre><strong><span style="color: #008000;"> // latitude and longitude</span></strong>
 double latitude = 12.9716;
 double longitude = 77.5946;

 <span style="color: #008000;"><strong> // create marker</strong></span>
 MarkerOptions marker = new MarkerOptions().position(new LatLng(latitude, longitude)).title("Hello Maps");

<strong><span style="color: #008000;">// Changing marker icon</span></strong>
marker.icon(BitmapDescriptorFactory.fromResource(R.drawable.my_marker_icon)));

<strong><span style="color: #008000;"> // adding marker</span></strong>
 googleMap.addMarker(marker);</pre>
<h3 id="ui_controls"><strong><span style="color: #000080;">UI controls</span></strong></h3>
<p>The Maps API offers built-in UI controls that are similar to those found in the Google Maps application on your Android phone. You can toggle the visibility of these controls using the <span style="color: #0000ff;"><strong>UiSettings</strong></span> class which can be obtained from a <strong><span style="color: #008000;">GoogleMap</span></strong> with the <strong><span style="color: #008000;">GoogleMap.getUiSettings</span></strong> method.</p>
<h4><span style="color: #0000ff;"><strong>Zoom Controls</strong></span></h4>
<p>You can call <strong><span style="color: #008000;"><em>setZoomControlsEnabled()</em> </span></strong>function to enable zooming controls on the map. By disabling these buttons map zooming functionality still work by pinching gesture. These are disabled by default but can be enabled by calling <strong><span style="color: #008000;"><em>setZoomControlsEnabled() </em></span></strong><span style="color: #000000;">method</span></p>
<pre>googleMap.getUiSettings().setZoomControlsEnabled(true);</pre>
<h2><img class="alignnone wp-image-1299" src="https://c1ctech.com/wp-content/uploads/2019/11/Screenshot_1573743650.png" alt="Screenshot_1573743650" width="368" height="654" /></h2>
<h4><strong><span style="color: #0000ff;">Compass</span></strong></h4>
<p>The compass will only ever appear when the camera is oriented such that it has a non-zero bearing or non-zero tilt. When the user clicks on the compass, the camera animates back to a position with bearing and tilt of zero (the default orientation) and the compass fades away shortly afterwards. You can disable the compass appearing altogether by calling <strong><span style="color: #008000;"><em>setCompassEnabled()</em></span></strong> function</p>
<pre>googleMap.getUiSettings().setCompassEnabled(false);</pre>
<h2><img class="alignnone size-full wp-image-1300" src="https://c1ctech.com/wp-content/uploads/2019/11/compass_img.png" alt="compass_img" width="320" height="480" /></h2>
<h4><strong><span style="color: #0000ff;">My Location Button</span></strong></h4>
<p>My location button will be used to move map to your current location. This button can be shown / hidden by calling <strong><span style="color: #008000;"><em>setMyLocationButtonEnabled()</em></span></strong> function</p>
<pre>googleMap.getUiSettings().setMyLocationButtonEnabled(true);</pre>
<h4><img class="alignnone size-full wp-image-1302" src="https://c1ctech.com/wp-content/uploads/2019/11/mylocationbutton_img.png" alt="mylocationbutton_img" width="320" height="480" /></h4>
<h4><span style="color: #0000ff;"><strong>Level Picker</strong></span></h4>
<p><span style="color: var(--color-text);">The indoor map is normally shown with a level picker, which shows different maps for different floors. By default, a level picker (floor picker) appears near the center right-hand edge of the screen when the user is viewing an <a href="https://developers.google.com/maps/documentation/android-sdk/map#indoor_maps">indoor map</a>. You can disable or enable the level picker control by calling <strong><span style="color: #008000;"><em>setIndoorLevelPickerEnabled()</em></span></strong></span></p>
<pre>googleMap.getUiSettings().setIndoorLevelPickerEnabled(true);</pre>
<h3><img class="alignnone size-full wp-image-1301" src="https://c1ctech.com/wp-content/uploads/2019/11/levelpicker_img.png" alt="levelpicker_img" width="320" height="480" /></h3>
<h3><span style="color: #000080;"><strong>Map Gesture</strong></span></h3>
<p>A map created with the Maps SDK for Android supports the same gestures as the Google Maps application. However, there might be situations where you want to disable certain gestures in order to preserve the state of the map.</p>
<h4><strong><span style="color: #0000ff;">Zoom Gesture</span></strong></h4>
<p>A user can change the zoom level of the camera(ie. zoom in, zoom out). If enabled, users can either double tap/two-finger tap or pinch to zoom the camera. If disabled, these gestures have no effect. This setting doesn&#8217;t affect the zoom buttons. You can disable zoom gestures by calling <strong><span style="color: #008000;"><em>setZoomGesturesEnabled(boolean)</em></span></strong> method</p>
<pre>googleMap.getUiSettings().setZoomGesturesEnabled(false);</pre>
<h4><strong><span style="color: #0000ff;">Scroll Gesture</span></strong></h4>
<p>A user can scroll (pan) around the map by dragging the map with their finger. You can disable scrolling by calling <strong><span style="color: #008000;"><em>setScrollGesturesEnabled(boolean)</em></span></strong> method</p>
<pre>googleMap.getUiSettings().setScrollGesturesEnabled(false);</pre>
<h4><strong><span style="color: #0000ff;">Tilt Gesture</span></strong></h4>
<p>A user can tilt the map by placing two fingers on the map and moving them down or up together to increase or decrease the tilt angle respectively. You can disable tilt gestures by calling <strong><span style="color: #008000;"><em>setTiltGesturesEnabled(boolean)</em></span></strong> method</p>
<pre>googleMap.getUiSettings().setTiltGesturesEnabled(false);</pre>
<h4><strong><span style="color: #0000ff;">Rotate Gesture</span></strong></h4>
<p>A user can rotate the map by placing two fingers on the map and applying a rotate motion. You can disable rotation by calling <strong><span style="color: #008000;"><em>setRotateGesturesEnabled(boolean)</em> </span></strong>method</p>
<pre>googleMap.getUiSettings().setRotateGesturesEnabled(false);</pre>
<h3></h3>
<h3><strong><span style="color: #000080;">Moving Camera to a Location with animation</span></strong></h3>
<p>You may want to move the camera to a particular position. Google maps provide a set of functions to achieve this.</p>
<pre>CameraPosition cameraPosition = new CameraPosition.Builder().target(
 new LatLng(12.9716, 77.5946)).zoom(12).build();

googleMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));</pre>
<p>Although google maps provides a lot of other features, I covered only basic topics in this tutorial. Remaining topics seem to be pretty much lengthy, so I’ll post them as separate articles.