Custom Info Window for Google Maps

Question

I'd like to make a custom Info Window for Google Maps for iOS like the photo below. Is it possible to extend GMSOverlay like GMSMarker, GMSPolyline, and GMSPolygon do to create custom graphics?

Answer 1

You will want to use the markerInfoWindow delegate method along with setting the infoWindowAnchor.

When you create your marker, set the anchor:

GMSMarker *marker = [[GMSMarker alloc] init]; marker.position = MARKER_POSITION; marker.infoWindowAnchor = CGPointMake(0.44f, 0.45f); marker.icon = [UIImage imageNamed:@"CustomMarkerImageName"]; 

then create the delegate method:

- (UIView *)mapView:(GMSMapView *)mapView markerInfoWindow:(GMSMarker *)marker {   InfoWindow *view =  [[[NSBundle mainBundle] loadNibNamed:@"InfoWindow" owner:self options:nil] objectAtIndex:0];   view.name.text = @"Place Name";   view.description.text = @"Place description";   view.phone.text = @"123 456 789";   view.placeImage.image = [UIImage imageNamed:@"customPlaceImage"];   view.placeImage.transform = CGAffineTransformMakeRotation(-.08);   return view; } 

In the example above I created a xib and I loaded that xib, returning the resulting UIView. You could instead construct a UIView using just code.

Answer 2

For those who's trying to add buttons to a custom view representing info window - it seems to be impossible to do, because Google Maps SDK draws it as an image or something like this. But there is a quite simple solution:

1. You have to create a custom view with buttons and whatever you need to be displayed in your info window.
2. Add it as a subview in your mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) method. You can set a position of a custom view by getting a coordinates of a marker tapped with a help of mapView.projection.pointForCoordinate(marker.position)

3. Your custom view possibly has to change it position by following camera position, so you have to handle mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) where you could easily update your custom view position.

   var infoWindow = CustomInfoView() var activePoint : POIItem?  func mapView(mapView: GMSMapView, didTapMarker marker: GMSMarker) -> Bool {     if let poiItem = marker as? POIItem {     // Remove previously opened window if any         if activePoint != nil {             infoWindow.removeFromSuperview()             activePoint = nil         }         // Load custom view from nib or create it manually         // loadFromNib here is a custom extension of CustomInfoView         infoWindow = CustomInfoView.loadFromNib()         // Button is here         infoWindow.testButton.addTarget(self, action: #selector(self.testButtonPressed), forControlEvents: .AllTouchEvents)          infoWindow.center = mapView.projection.pointForCoordinate(poiItem.position)         activePoint = poiItem         self.view.addSubview(infoWindow)     }     return false }  func mapView(mapView: GMSMapView, didChangeCameraPosition position: GMSCameraPosition) {      if let tempPoint = activePoint {         infoWindow.center = mapView.projection.pointForCoordinate(tempPoint.position)     }  }