Beray Bentesen in Xamarin iOS

Get Started with Google Maps SDK - Xamarin iOS

 

This article will be covering :

  • Installing Google Maps API
  • Working with Maps and StreetView
  • Working with Tab Bar Controller

With the Google Maps SDK for iOS, you can add maps based on Google maps data to your application and this blog covers how to work with Maps and StreetView in Xamarin iOS projects.

Getting Started

  • In order to install Vision Api you have to include the Xamarin.Google.iOS.Maps library
  • To be able to use library, you must get an API key from Google Developer console.
    • Click here and create an Api key for iOS
  • You can use either the Nuget Package Manager,or install it through Xamarin component store

Working with Xamarin iOS Project

  • Api key must be defined inside AppDelegate.cs
  • Replace your key with 'YourKey'
public class AppDelegate : UIApplicationDelegate  
    {
        const string MapsApiKey = "YourKey";
                ...
  • In the same class, provide API key
public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)  
    {
         MapServices.ProvideAPIKey(MapsApiKey);
                 ...
  • UITabBarController supports tabbed application development and takes care of the multi-screen management.
  • UITabBarController used in this demo to present Google Maps and StreetView in a same ViewController.
  • To use UITabBarController, drag and drop Tab Bar Controller from Toolbox through the storyboard.
  • Storyboard should looks like this

  • Each View Controller needs it's own Class
  • Choose each View Controller from storyboard and create a new class from Properties menu
  • First, open StreetViewController class and implement IMapViewDelegate
  • Create a new PanoramaView which extends UIView
public override void LoadView()  
        {
            base.LoadView();

            var panoView = new PanoramaView();
            ...
  • And set View of StreetViewController as PanoramaView
View = panoView;  
  • Setting Coordinate for PanoramaView
panoView.MoveNearCoordinate(new CoreLocation.CLLocationCoordinate2D(40.602404,-73.754150));  
  • To work with maps, open MapViewController class.
  • Define MapView at the top of class
public partial class MapViewController : UIViewController  
    {
        MapView mapView;
              ...
  • To set position of map, define a new MapView and set values.
var camera = CameraPosition.FromCamera(40.602404,-73.754150,12.0f);  
  • Then create a new MapView
mapView = MapView.FromCamera(CGRect.Empty,camera);  
  • And set MapViewController's View as MapView
  • Build and run project

  • Adding marker to map is quite easy; Create a new Marker, update values and set Map for marker.
var marker = new Marker();

marker.Position = new CoreLocation.CLLocationCoordinate2D(40.602404, -73.754150);

marker.Title = "Cornaga Ave";

marker.Snippet = "Far Rockaway, NY 11691";

marker.Map = mapView;
  • Build and run again

Now you are able to work with Google Maps SDK, including Maps and StreetView.