Xamarin.Android Map Integration With Line And Circle

Step 1

In this article, we are going to learn about integrating Google maps in Xamarin Android projects. First, as default create a Xamarin Android project.
 
Step 2

Add Xamarin Android Google Maps NuGet package in the reference.
 
 
 
Step 3 
 
Generate Your Google Map API key in Google API Console. Here
 
Step 4
 
Add your API key in the AndroidManifest.xml with some permissions.
  1. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  
  2.     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
  3.     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
  4.     <uses-permission android:name="com.googlemap.googlemap.permission.MAPS_RECEIVE" />  
  5.     <uses-permission android:name="com.google.android.providers.gsf.permisson.READ_GSERVICES" />  
  6.     <uses-permission android:name="android.permission.INTERNET" />  
  7.     <application android:allowBackup="true" android:label="@string/app_name">  
  8.         <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR API KEY" />  
  9.         <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />  
  10.     </application>  
Step 5
 
Add Fragment in Main.xml to show your map 
  1. <fragment  
  2.  android:id="@+id/googlemap"  
  3.  android:layout_width="match_parent"  
  4.  android:layout_height="match_parent"  
  5.  class="com.google.android.gms.maps.MapFragment" />    
Step 6
 
Run and test your app whether map is displaying or not. If not check with API Key and permissions again.
 
 
 
Note

We can only be able to view the simple map without any controls. 
 
Step 7
 
To get our map instance we have to set GetMapAsync.
  1. protected override void OnCreate(Bundle savedInstanceState)  
  2.   {  
  3.       base.OnCreate(savedInstanceState);  
  4.   
  5.       // Set our view from the "main" layout resource  
  6.       SetContentView(Resource.Layout.Main);  
  7.       var googleMap = FragmentManager.FindFragmentById<MapFragment>(Resource.Id.googlemap);  
  8.       googleMap.GetMapAsync(this);  
  9.   }  
Now, we have to implement Interface IOnMapReadyCallback so that the Method OnMapReady will be called after the Google Map is ready.
 
Step 8
 
To Set a Rectangle Add the following code inside OnMapReady Method.
  1. public void OnMapReady(GoogleMap googleMap)  
  2.        {  
  3.            mMap = googleMap;  
  4.            PolygonOptions rectOptions = new PolygonOptions();  
  5.            rectOptions.Add(new LatLng(10.35, -122.0));  
  6.            rectOptions.Add(new LatLng(10.45, -122.0));  
  7.            rectOptions.Add(new LatLng(10.45, -122.2));  
  8.            rectOptions.Add(new LatLng(10.35, -122.2));  
  9.            // notice we don't need to close off the polygon  
  10.            mMap.AddPolygon(rectOptions);  
  11.            CameraPosition.Builder builder = CameraPosition.InvokeBuilder();  
  12.            builder.Target(new LatLng(10.35, -122.2));  
  13.            builder.Zoom(10);  
  14.            builder.Bearing(0);  
  15.            builder.Tilt(0);  
  16.            mMap.MoveCamera(CameraUpdateFactory.NewCameraPosition(builder.Build()));  
  17.        }  
Step 9
 
Now, you can see the rectangle in the map.
 
Finally our class will be:
  1. [Activity(Label = "MapIntegration", MainLauncher = true, Theme = "@style/Theme.AppCompat")]  
  2.  public class MainActivity : AppCompatActivity, IOnMapReadyCallback  
  3.  {  
  4.      private GoogleMap mMap;  
  5.   
  6.      public void OnMapReady(GoogleMap googleMap)  
  7.      {  
  8.          mMap = googleMap;  
  9.          PolygonOptions rectOptions = new PolygonOptions();  
  10.          rectOptions.Add(new LatLng(12.35, 78.0));  
  11.          rectOptions.Add(new LatLng(12.45, 78.0));  
  12.          rectOptions.Add(new LatLng(12.45, 78.2));  
  13.          rectOptions.Add(new LatLng(12.35, 78.2));  
  14.          // notice we don't need to close off the polygon  
  15.          mMap.AddPolygon(rectOptions);  
  16.          CameraPosition.Builder builder = CameraPosition.InvokeBuilder();  
  17.          builder.Target(new LatLng(10.35, 78.2));  
  18.          builder.Zoom(10);  
  19.          builder.Bearing(0);  
  20.          builder.Tilt(0);  
  21.          mMap.MoveCamera(CameraUpdateFactory.NewCameraPosition(builder.Build()));  
  22.      }  
  23.   
  24.      protected override void OnCreate(Bundle savedInstanceState)  
  25.      {  
  26.          base.OnCreate(savedInstanceState);  
  27.   
  28.          // Set our view from the "main" layout resource  
  29.          SetContentView(Resource.Layout.Main);  
  30.          var googleMap = FragmentManager.FindFragmentById<MapFragment>(Resource.Id.googlemap);  
  31.          googleMap.GetMapAsync(this);  
  32.      }  
  33.  }  
The output is:
 
   
Step 10
 
To get a circle add the following code:
  1.    CircleOptions options = new CircleOptions();  
  2.    options.InvokeCenter(new LatLng(13,80.2));  
  3.    options.InvokeRadius(5000);  
  4. mMap.AddCircle(options);  
The output is:
 
    
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now