In this lesson, you will learn:

• How to add a native map or MapBox map to your pages
• How to read the user's current location
• How to track the user's location on an ongoing basis
• How to launch the directions' app to any given address.

Download this video directly

 

---

Map component

You can use the Zebble.Plugin.Map component to render a Map. It supports adding annotations too. You can add it to your project from nuget.

To use this component, install the Zebble.Map nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

To add a map to your page, you can use the built-in map object in Zebble. You can set the Center and Zoom level of the map to define the starting position. After that the user can drag the round or zoom in and out.

You can also add an annotations to the map. Each annotation should specify the location, icon, text and some other details. Internally it is rendered as a native map for each operating system and each annotation will be displayed as a marker on the map.

<Map Id="MyMap" Center="51.5074, 0.1278" ZoomLevel="13">
   <Map.Annotation
          Location="51.5074, 0.1278"
          IconPath="Images/Icons/MyPin.png"  IconWidth="25"  IconHeight="50"
          Title="Marker 1" Subtitle="Some description..." />
    <Map.Annotation … />
</Map>

You can add annotations using C#:

foreach(var item in ... /*usually API or database call*/)
{
     MyMap.Add(new Map.Annotation
       { 
            Location = new Zebble.Services.GeoLocation(item.Latitude, item.Longitude),
            Title = item.Name
       });
}

Map interactions

You can specify which interactions are enabled on the map by setting the following boolean properties on the map:

• Pannable: Whether the user can drag the map around. This is true by default.
• Zoomable: Whether the user can pinch to zoom in and out. This is true by default.
• Rotatable: Whether the user can use rotation gestures. This is true by default.
• ShowZoomControls: Whether the UI controls should be displaed to change the Zoom. This is false by default (as gesture zooming is preferred).

Get a Google Maps API key

To use the Google Maps Android API, you must register your app project on the Google API Console and get a Google API key which you can add to your app. For details, see the guide to getting an API key.

---

Manifest Permissions

In order for the map and location services to work you should add the necessary permissions to the manifest files. The following lists the relevant permissions you might need:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="4.5" package="com.xamarin.docs.android.mapsandlocationdemo2" android:versionCode="6">
    <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="17" />

    <!-- Google Maps for Android v2 requires OpenGL ES v2 -->
    <uses-feature android:glEsVersion="0x00020000" android:required="true" />

    <!-- We need to be able to download map tiles and access Google Play Services-->
    <uses-permission android:name="android.permission.INTERNET" />

    <!-- Allow the application to access Google web-based services. -->
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />

    <!-- Google Maps for Android v2 will cache map tiles on external storage -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <!-- Google Maps for Android v2 needs this permission so that it may check the connection state as it must download data -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <!-- Permission to receive remote notifications from Google Play Services -->
    <!-- Notice here that we have the package name of our application as a prefix on the permissions. -->
    <uses-permission android:name="<PACKAGE NAME>.permission.MAPS_RECEIVE" />
    <permission android:name="<PACKAGE NAME>.permission.MAPS_RECEIVE" android:protectionLevel="signature" />

    <!-- These are optional, but recommended. They will allow Maps to use the My Location provider. -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


    <application android:label="@string/app_name">
        <!-- Put your Google Maps V2 API Key here. -->
        <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_API_KEY" />
        <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
    </application>
</manifest>

---

 

Map Box

 

If the functionality provided by the native map components is not enough, then you can use the MapBox Plugin for Zebble which you can install from Nuget.

To install Map for Zebble for Xamarin, run the following command in the Package Manager Console

To use this component, install the Zebble.MapBox nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

 

It has some advanced features such as custom colour themes, data visualizations and navigation.

You can use below codes for showing MapBox:

<Plugin.MapBox  Center="51.5074, 0.1278" Zoom="13" />
More information : https://www.mapbox.com