CODEWITHSUNDEEP
iosobjective-cgoogle-maps
Abhishek Singh
Abhishek Singh

Reputation: 172

Add text on custom marker on google map for ios

Am trying to put marker with Textview .Is there any posibility to add text over marker on google map in ios.

Like this

Upvotes: 14

Views: 12411

Answers (4)

Wongsathon Tuntanakan
Wongsathon Tuntanakan

Reputation: 71

enter image description here

func createImage(_ count: Int) -> UIImage? {
    let string = String(count)
    let paragraphStyle = NSMutableParagraphStyle()
    let font = UIFont.systemFont(ofSize: 9.5)
    paragraphStyle.alignment = .center
    let attributes: [NSAttributedString.Key: Any] = [
        .font : font,
        .foregroundColor: UIColor.black,
        .paragraphStyle: paragraphStyle
    ]
    
    let attrStr = NSAttributedString(string: string, attributes: attributes)

    let image = self.imageWithImage(image: UIImage(named: "pin_online.png")!, scaledToSize: CGSize(width: 50.0, height: 60.0))
    UIGraphicsBeginImageContext(image.size)
    UIGraphicsBeginImageContextWithOptions(image.size, false, 0.0)
    image.draw(in: CGRect(x: 0, y: 0, width: CGFloat(image.size.width), height: CGFloat(image.size.height)))
    let rect = CGRect(x: 14.7, y: CGFloat(3), width: CGFloat(image.size.width), height: CGFloat(image.size.height))
    attrStr.draw(in: rect)
    let markerImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return markerImage
}

Upvotes: 1

S1LENT WARRIOR
S1LENT WARRIOR

Reputation: 12214

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.

Upvotes: 7

Kunal Gupta
Kunal Gupta

Reputation: 3074

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.

Upvotes: 10

arturdev
arturdev

Reputation: 11039

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;
}

Upvotes: 33

Related Questions