Custom Google Maps Marker View

Question

I want to display custom UIView instead of the default one for Google Maps Marker (iOS SDK). There is a property to set icon but icon it is not enough in my case. I receive an image from backend which should be placed inside the custom marker:

I know that I could completely modify MarkerInfoWindow but it is not what I need: custom-info-window-for-google-maps

How to override marker view?

Answer 1

Google Maps GMSMarker has a property iconView which allows us to set custom UIView for marker. You need to create xib within which your image from backend and other data to be displayed can be managed. Below code snippet can be used to set a custom marker view.

- (void)setCustomMarker {
   GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5 longitude:-0.127 zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];
   CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

In your case londonView should be a UIView which you can set to iconView property.

Google maps implementation for custom marker section with things to consider while implementing it.

Answer 2

1. Create custom view as per your requirements (with .xib and .swift) file

MapIconView.swift & MapIconView.xib

class MapIconView: UIView {
    class func createMyClassView() -> MapIconView {
        let myClassNib = UINib(nibName: "MapIconView", bundle: nil)
        return myClassNib.instantiate(withOwner: nil, options: nil)[0] as! MapIconView
    }
}

2. Set custom marker iconView

@IBOutlet weak var mapView: GMSMapView!

let markerView = MapIconView.createMyClassView()
marker.iconView =  markerView
marker.map = self.mapView

3. The groundAnchor didn't show up at all

marker.groundAnchor = CGPoint(x: 0.5, y: 0.5)

Answer 3

It is turned out that I have to use the Icon property only. And in order to accomplish my goal a have to render two images into one using Graphics Context.