vbrittes
vbrittes

Reputation: 200

Custom Google Maps marker info view on Xamarin.iOS

The IMapViewDelegate apparently isn't a complete C# implementation of MapViewDelegate from objC. That inhibits the access to markerInfoContents delegate method.
I'd like to do something like this allowing me to custom the contentView layout and the tap action from raywenderlich.com

got from: http://www.raywenderlich.com/81103/introduction-google-maps-ios-sdk-swift

Upvotes: 2

Views: 5224

Answers (1)

SARATH SASI
SARATH SASI

Reputation: 1415

I think i can explan its from scratch to add a Custom MarkerInfo Window on the Tap of a Marker. Iam using Xamarin.Google.iOS.Maps package from Official Nuget Library for adding Google Map on my Xamarin MVVM Cross Touch Project.

private void SetupMap()
            {
                if (_mapView != null)
                    _mapView.RemoveFromSuperview ();

            //Init Map wiht Camera
            var camera = new CameraPosition(new CLLocationCoordinate2D(36.069082, -94.155976), 15, 30, 0);
            _mapView = MapView.FromCamera(RectangleF.Empty, camera);
            _mapView.MyLocationEnabled = true;
            //Add button to zoom to location
            _mapView.Settings.MyLocationButton = true;
            _mapView.MyLocationEnabled = true;
            _mapView.Settings.SetAllGesturesEnabled(true);

            var xamMarker = new Marker () {
                Title = "Sample",
                Snippet = "Sample Location",
                Position = new CLLocationCoordinate2D (36.069082, -94.155976),
                Map = _mapView
            };
            var xamMarker1 = new Marker () {
                Title = "Sample1",
                Snippet = "Sample Location2",
                Position = new CLLocationCoordinate2D (35.069082, -94.155976),
                Map = _mapView
            };

            _mapView.TappedMarker = (map, marker) => {
                Console.WriteLine("Marker tapped:"+ map +"::"+marker);

                _mapView.MarkerInfoWindow = new GMSInfoFor(markerInfoWindow);
                return false;
            };
            _mapView.Frame = this.contentViewOutlet.Bounds;
            this.contentViewOutlet.AddSubview (_mapView);

            _mapView.InfoTapped += (object sender, GMSMarkerEventEventArgs e) => {
                Console.WriteLine ("Marker Info tapped:"+e+"::"+sender);

                UIAlertView alert = new UIAlertView () { 
                    Title = "Alert", Message = sampleLongandLat
                };
                alert.AddButton("OK");
                alert.Show ();

            };
        }

you can call this SetupMap() method from where ever you want. for example in ViewDidLoad or from any where you have to add the google map.

On click or Tap of the marker we are creating a custom marker window

_mapView.TappedMarker = (map, marker) => {
                Console.WriteLine("Marker tapped:"+ map +"::"+marker);

                _mapView.MarkerInfoWindow = new GMSInfoFor(markerInfoWindow);
                return false;
            };

the above code is included in the SetupMap method.

mapView.MarkerInfoWindow = new GMSInfoFor(markerInfoWindow); these above line of code will allow us to load a custom Marker Window instead of the default one

    UIView markerInfoWindow(UIView view, Marker marker)
            {
// use this method to return the custom view u have already created to load as a subview in Google Map as Custom Marker Info Windo
                UIView v;
                v = MarkerInfoView.Create(marker);
                sampleLongandLat = MarkerInfoView.markerInfoString;
                sampleLongandLat = MarkerInfoView.locationIDString;
                return v;
            }

for adding an custom UIView you can follow the example provided in the xamarin web site loading an xib or UIView in another ViewController as a sub viewenter image description here

_mapView.InfoTapped += (object sender, GMSMarkerEventEventArgs e) => {
                Console.WriteLine ("Marker Info tapped:"+e+"::"+sender);

                UIAlertView alert = new UIAlertView () { 
                    Title = "Alert", Message = sampleLongandLat
                };
                alert.AddButton("OK");
                alert.Show ();

            };

the above code snippet you can use for detecting tap on the Marker Info Window

Upvotes: 4

Related Questions