How to show overlay info view with two button more when i click a marker on google in iOS

Question

I am trying to show a custom overlay view from the Google Maps through the Google Maps API for iOS. This overlay view content info of marker, and two my button. But I cannot find any references for this. My desired overlay view is as image with link below:

http://i1121.photobucket.com/albums/l515/dungnlh_khtn07/NguoiMoCay/overlayinfoview_zps8110b7ed.jpg

Please give me a guide for this!

Answer 1

The best way of achieving this is to pass your GMSMapView a custom view for your info windows via the GMSMapViewDelegate's mapView:markerInfoWindow: method.

To accomplish this, set yourself up as the delegate for your GMSMapView instance, like so:

self.mapView.delegate = self;

Then return a custom UIView when requested:

- (UIView *)mapView:(GMSMapView *)mapView markerInfoWindow:(id<GMSMarker>)marker
{
    UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    customView.backgroundColor = [UIColor redColor];

    return customView;
}

You can find a little more information by looking in the GMSMapView header, which states:

/**
 * Called when a marker is about to become selected, and provides an optional
 * custom info window to use for that marker if this method returns a UIView.
 * If you change this view after this method is called, those changes will not
 * necessarily be reflected in the rendered version.
 *
 * The returned UIView must not have bounds greater than 500 points on either
 * dimension.  As there is only one info window shown at any time, the returned
 * view may be reused between other info windows.
 *
 * @return The custom info window for the specified marker, or nil for default
 */

Answer 2

Possibly, as mentioned officially in documentation of Google Maps Android API, the below restriction regarding infowindows applies to Google Maps iOs SDK also :

Info window is not a live View, rather the view is rendered as an image onto the map. As a result, any listeners you set on the view are disregarded and you cannot distinguish between click events on various parts of the view. You are advised not to place interactive components — such as buttons, checkboxes, or text inputs — within your custom info window.

So bascially clicking on any part of the infowindow will trigger only "didTapWindowOfMarker"

Answer 3

OK, but can someone please clarify how to get a UIButton on that UIView to respond to touches? Like two buttons in Dung Nguyen Le Hoang's attached picture. For example, if I add a button like this:

- (UIView *)mapView:(GMSMapView *)mapView markerInfoWindow:(id<GMSMarker>)marker
{
    UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    customView.backgroundColor = [UIColor redColor];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [button addTarget:self action:@selector(buttonPressed) forControlEvents:UIControlEventTouchUpInside];
    [button setFrame:CGRectMake(0, 0, 30, 30)];

    [customView addSubview:button];

    return customView;
}

and of course have buttonPressed

- (void)buttonPressed
{
    NSLog(@"Hello");
}

it doesn't get called. If I added the button as a subview to self.mapView then it appears on mapView, not InfoWindow and, of course, is responsive to touches. I suppose it's due to some unset frames, but can't quite get it. Can someone please clarify?

Answer 4

• (void)mapView:(GMSMapView *)mapView didTapInfoWindowOfMarker:(GMSMarker *)marker

Answer 5

You can show AlertView or ActionSheet with two buttons when the user tap on the markerInfoContents