{"id":17182,"date":"2015-03-04T13:34:46","date_gmt":"2015-03-04T21:34:46","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=17182"},"modified":"2015-03-04T13:34:46","modified_gmt":"2015-03-04T21:34:46","slug":"android-tips-faster-maps-with-google-maps-lite","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/android-tips-faster-maps-with-google-maps-lite\/","title":{"rendered":"Android Tips: Faster Maps with Google Maps Lite"},"content":{"rendered":"<p>\t\t\t\tInside Google Play Services is the powerful Google Maps API, which allows you to add a rich and interactive maps control to your Android apps. However, the maps control and API can be heavy, and sometimes you just want to display a simple map with a few markers on top of it. This is where the brand new Google Maps Lite mode can come in handy by providing a bitmap image at a specified location and zoom level, while still giving access to a subset of the full API.<\/p>\n<p><img decoding=\"async\" class=\"alignright size-full wp-image-17183\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/mug1.png\" alt=\"coffee mug\" width=\"203\" height=\"218\" \/>This is perfect for situations when your users don&#8217;t need to interact with the map, a map is displayed in a feed of items, or you just need a small map to show with a marker. In my case, I wanted to create an app to flip through a list of nearby coffee shops to help feed my 24\/7 coffee obsession. I didn&#8217;t want to interact with the map; I just wanted the name, rating, and distance of the coffee shop to be overlaid on top of the map. Let&#8217;s go over how to start using Google Maps Lite in an app like this.<\/p>\n<h2>Setting Up Your Project<\/h2>\n<p>To get started with Google Play Services and Google Maps, you will first need to install the <a href=\"https:\/\/components.xamarin.com\/view\/googleplayservices\" title=\"Google Play Services Component\">Component<\/a> or <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.GooglePlayServices\/\" title=\"Google Play Services NuGet\">NuGet<\/a> in your Xamarin.Android project.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-17184\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/AddComponent-1024x300.png\" alt=\"Add Google Play Services Component\" width=\"1024\" height=\"300\" \/><\/p>\n<h3>Obtaining a Google Maps API Key<\/h3>\n<p>The next step requires a bit of manual work to obtain your Google Maps API Key from Google, however, we have a great <a href=\"http:\/\/developer.xamarin.com\/guides\/android\/platform_features\/maps_and_location\/maps\/obtaining_a_google_maps_api_key\/\" title=\"Obtain Google Maps API Key\">walkthrough to follow on our documentation site<\/a>. Once you have your key, you will need to update your AndroidManifest.xml with a few meta-data entries and permissions:<\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;manifest xmlns:android=&quot;http:\/\/schemas.android.com\/apk\/res\/android&quot; android:versionName=&quot;4.5&quot; package=&quot;com.xamarin.docs.android.mapsandlocationdemo2&quot; android:versionCode=&quot;6&quot;&gt;\n    ...\n    &lt;application android:label=&quot;@string\/app_name&quot;&gt;\n        &lt;!-- Put your Google Maps V2 API Key here. --&gt;\n        &lt;meta-data android:name=&quot;com.google.android.maps.v2.API_KEY&quot; android:value=&quot;YOUR_API_KEY&quot; \/&gt;\n        &lt;meta-data android:name=&quot;com.google.android.gms.version&quot; android:value=&quot;@integer\/google_play_services_version&quot; \/&gt;\n    &lt;\/application&gt;\n    &lt;uses-permission android:name=&quot;android.permission.ACCESS_COARSE_LOCATION&quot; \/&gt;\n    &lt;uses-permission android:name=&quot;android.permission.ACCESS_FINE_LOCATION&quot; \/&gt;\n    &lt;uses-permission android:name=&quot;android.permission.INTERNET&quot; \/&gt;\n    &lt;uses-permission android:name=&quot;android.permission.ACCESS_NETWORK_STATE&quot; \/&gt;\n    &lt;uses-permission android:name=&quot;android.permission.ACCESS_WIFI_STATE&quot; \/&gt;\n    &lt;uses-permission android:name=&quot;android.permission.WRITE_EXTERNAL_STORAGE&quot; \/&gt;\n    &lt;uses-feature android:glEsVersion=&quot;0x00020000&quot; android:required=&quot;true&quot; \/&gt;\n&lt;\/manifest&gt;\n<\/pre>\n<h2>Adding a Map in Lite Mode<\/h2>\n<p>Enabling Lite mode on a map is extremely simple, as it uses the same classes and interfaces as the full Google Maps API. This means you can add a simple flag to your MapView, MapFragment, or GoogleMap Options.<\/p>\n<p><b>XML attribute<\/b><\/p>\n<pre class=\"lang:xml decode:true\">\n&lt;FrameLayout xmlns:android=&quot;http:\/\/schemas.android.com\/apk\/res\/android&quot;\n    xmlns:map=&quot;http:\/\/schemas.android.com\/apk\/res-auto&quot;\n    android:layout_width=&quot;fill_parent&quot;\n    android:layout_height=&quot;fill_parent&quot;&gt;\n   &lt;com.google.android.gms.maps.MapView\n        android:id=&quot;@+id\/map&quot;\n        android:layout_width=&quot;match_parent&quot;\n        android:layout_height=&quot;match_parent&quot;\n        map:cameraZoom=&quot;15&quot;\n        map:mapType=&quot;normal&quot;\n        map:liteMode=&quot;true&quot;\/&gt;\n&lt;\/FrameLayout&gt;\n<\/pre>\n<p><b>In Code Behind<\/b><\/p>\n<pre class=\"lang:csharp decode:true\">\nvar options = new GoogleMapOptions ();\noptions.InvokeLiteMode (true);\n<\/pre>\n<h2>Initializing the Map<\/h2>\n<p>Recently, Google changed how developers should initialize their Maps when using Google Play Services. You must now complete two steps to get your map to appear:<\/p>\n<h3>1.) Find your map and create<\/h3>\n<p>In your Activity&#8217;s OnCreate method, you will need to find your MapView and call its <code>OnCreate<\/code> method passing in the bundle.<\/p>\n<pre class=\"lang:csharp decode:true\">\nmapView = FindViewById&lt;MapView&gt; (Resource.Id.map);\nmapView.OnCreate (bundle);\n<\/pre>\n<h3>2.) Implement IOnMapReadyCallback and Get Map<\/h3>\n<p>To get the reference to your <code>GoogleMap<\/code> (which is what you use to add markers and zoom to a location), you must implement IOnMapReadyCallback on your Activity and then call the MapView&#8217;s <code>GetMapAsync<\/code> method.<\/p>\n<pre class=\"lang:csharp decode:true\">\npublic class MainActivity : ActionBarActivity, IOnMapReadyCallback\n{\n  GoogleMap googleMap;\n  MapView mapView;\n  protected override void OnCreate (Bundle bundle)\n  {\n    base.OnCreate (bundle);\n\n    SetContentView (Resource.Layout.main);\n    mapView = FindViewById&lt;MapView&gt; (Resource.Id.map);\n    mapView.OnCreate (bundle);\n    mapView.GetMapAsync (this);\n  }\n\n  public async void OnMapReady (GoogleMap googleMap)\n  {\n    this.googleMap = googleMap;\n    \/\/Setup and customize your Google Map\n    this.googleMap.UiSettings.CompassEnabled = false;\n    this.googleMap.UiSettings.MyLocationButtonEnabled = false;\n    this.googleMap.UiSettings.MapToolbarEnabled = false;\n  }\n}\n<\/pre>\n<h2>Move Map to Location<\/h2>\n<p>Google Maps Lite is powerful enough to enable you to move the camera to a specific location and even control the Zoom Level. Using the <a href=\"https:\/\/components.xamarin.com\/view\/GeolocatorPlugin\" title=\"Geolocator Plugin for Xamarin and Windows\" target=\"_blank\">Geolocator Plugin<\/a>, you can easily zoom the map to your current location:<\/p>\n<pre class=\"lang:csharp decode:true\">\nMapsInitializer.Initialize(this);\nvar position = await CrossGeolocator.Current.GetPositionAsync (10000);\nvar me = new LatLng (position.Latitude, position.Longitude);\ngoogleMap.MoveCamera (CameraUpdateFactory.NewLatLng (me));\n<\/pre>\n<p><img decoding=\"async\" class=\"alignright size-large wp-image-17185\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/Nexus-4-KitKat-Screentshot-1_framed-614x1024.png\" alt=\"Google Map Initialized\" width=\"250\" \/><\/p>\n<p>Note the <code>MapsInitializer.Initialize(this);<\/code>, which must be called before you start interacting with the map.<\/p>\n<h2>Adding Markers<\/h2>\n<p>With your map up and running, you can now start adding markers or other items to the map. In this case, let&#8217;s add a circle indicator at our current location and a full marker at the closest coffee shop:<\/p>\n<pre class=\"lang:csharp decode:true\">\nvar coffeeMarker = new MarkerOptions ();\ncoffeeMarker.SetPosition (new LatLng (coffee.Latitude, coffee.Longitude));\n\/\/add marker to map\ngoogleMap.AddMarker (coffeeMarker);\n\nvar meMarker = new CircleOptions ();\nmeMarker.InvokeCenter(me);\nmeMarker.InvokeRadius (16);\nmeMarker.InvokeStrokeWidth (0);\nmeMarker.InvokeFillColor (Resources.GetColor (Resource.Color.accent));\n\/\/add circle to map\ngoogleMap.AddCircle (meMarker);\n<\/pre>\n<p><img decoding=\"async\" class=\"aligncenter size-medium wp-image-17188\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/MapWithPins-300x291.png\" alt=\"Google Map With Pins\" width=\"300\" height=\"291\" \/><\/p>\n<h2>Learn More<\/h2>\n<p>You can grab the <a href=\"http:\/\/www.github.com\/jamesmontemagno\/Coffee-Filter\" title=\"Coffee Filter on GitHub\">entire source code for my app <b>Coffee Filter<\/b><\/a>, which shows how to use the Google Places API to query nearby coffee locations based on your location. Additionally, you can download <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.refractored.coffeefilter\" title=\"Coffee Filter on Google Play\">Coffee Filter from Google Play<\/a> on your Android device to try it today.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-17191\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/coffeefilterdemo.gif\" alt=\"coffeefilterdemo\" width=\"203\" height=\"350\" \/><\/p>\n<p>Be sure to read through <a href=\"https:\/\/developers.google.com\/maps\/documentation\/android\/lite\" title=\"Google Maps Lite Documentation\">Google&#8217;s Lite Mode documentation<\/a> to see all of the available API features when using a map in Lite Mode. To see how to easily integrate more features in Android&#8217;s location and maps APIs, be sure to read through our <a href=\"http:\/\/developer.xamarin.com\/guides\/android\/platform_features\/maps_and_location\/\" title=\"Maps and Locations Guides\">Xamarin documentation<\/a> to easily integrate them into your Xamarin.Android apps.<\/p>\n<p><em><a href=\"http:\/\/forums.xamarin.com\/discussion\/34490\" title=\"Discuss on Forums\">Discuss this post in the Xamarin Forums<\/a><\/em>\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inside Google Play Services is the powerful Google Maps API, which allows you to add a rich and interactive maps control to your Android apps. However, the maps control and API can be heavy, and sometimes you just want to display a simple map with a few markers on top of it. This is where [&hellip;]<\/p>\n","protected":false},"author":544,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-17182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>Inside Google Play Services is the powerful Google Maps API, which allows you to add a rich and interactive maps control to your Android apps. However, the maps control and API can be heavy, and sometimes you just want to display a simple map with a few markers on top of it. This is where [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=17182"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/17182\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=17182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=17182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=17182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}