Add text on custom marker on google map for ios

enter image description here

If you want to display something like this , then just follow these steps. It is very simple, You can use this method.

-(UIImage *)createImage:(NSUInteger)count{   //count is the integer that has to be shown on the marker 


UIColor *color = [UIColor redColor]; // select needed color
NSString *string = [NSString stringWithFormat:@"%lu",(unsigned long)count]; // the string to colorize
NSDictionary *attrs = @{ NSForegroundColorAttributeName : color };
NSAttributedString *attrStr = [[NSAttributedString alloc] initWithString:string attributes:attrs]; // add Font according to your need

UIImage *image = [UIImage imageNamed:@"ic_marker_orange"]; // The image on which text has to be added
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];

CGRect rect = CGRectMake(20,5, image.size.width, image.size.height);// change the frame of your text from here
[[UIColor whiteColor] set];
[attrStr drawInRect:rect];
UIImage *markerImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return markerImage;}

and when you set marker to the map then just set

    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.icon = [self createImage:[model.strFriendCount integerValue]]; // pass any integer to the method.

Here is the Swift 5 version of Kunal's answer:

//count is the integer that has to be shown on the marker
func createImage(_ count: Int) -> UIImage {

    let color = UIColor.red
    // select needed color
    let string = "\(UInt(count))"
    // the string to colorize
    let attrs: [NSAttributedString.Key: Any] = [.foregroundColor: color]
    let attrStr = NSAttributedString(string: string, attributes: attrs)
    // add Font according to your need
    let image = UIImage(named: "ic_marker_orange")!
    // The image on which text has to be added
    UIGraphicsBeginImageContext(image.size)
    image.draw(in: CGRect(x: CGFloat(0), y: CGFloat(0), width: CGFloat(image.size.width), height: CGFloat(image.size.height)))
    let rect = CGRect(x: CGFloat(20), y: CGFloat(5), width: CGFloat(image.size.width), height: CGFloat(image.size.height))

    attrStr.draw(in: rect)

    let markerImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return markerImage
}  

Hope this helps someone else.


You must make a view, where you must create an imageView (with your marker image) and Label (with your text) and take a screenshot of that view, and set as icon to your GMSMarker. Something like this:

- (void)foo
{
    GMSMarker *marker = [GMSMarker new];

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,60,60)];
    UIImageView *pinImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myPin"]];
    UILabel *label = [UILabel new];
    label.text = @"1";
    //label.font = ...;
    [label sizeToFit];

    [view addSubview:pinImageView];
    [view addSubview:label];
    //i.e. customize view to get what you need    


    UIImage *markerIcon = [self imageFromView:view];
    marker.icon = markerIcon;        
    marker.map = self.mapView;      
}

- (UIImage *)imageFromView:(UIView *) view
{
    if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
        UIGraphicsBeginImageContextWithOptions(view.frame.size, NO, [[UIScreen mainScreen] scale]);
    } else {
        UIGraphicsBeginImageContext(view.frame.size);
    }
    [view.layer renderInContext: UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}