GMSMarker icon from center (iOS)

Question

I just switched from Apple Maps to Google Maps. An issue that I can't seem to find an answer to is how do you make the icon for a GMSMarker to start from the center rather then from the bottom of the image.

An example of what I mean is the current location dot icon starts centered at the coordinates it is meant to express. However GMSMarkers icons start from the bottom of the icon.

score 64 · Accepted Answer · answered Mar 10 '15 at 09:29

You can change the start position of your marker icon with the property groundAnchor.

Google Maps SDK for iOS documentation:

The ground anchor specifies the point in the icon image that is anchored to the marker's position on the Earth's surface. This point is specified within the continuous space [0.0, 1.0] x [0.0, 1.0], where (0,0) is the top-left corner of the image, and (1,1) is the bottom-right corner.

Example:

The below example rotates the marker 90°. Setting the groundAnchor property to 0.5,0.5 causes the marker to be rotated around its center, instead of its base.

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView_;

For those that simply want to shift the marker position, all you need is `yourMarker.groundAnchor = CGPoint(0.5, 0.5);` Thanks @adboco! — Spencer, Sep 05 '17 at 16:35
For swift use following code:- let position = CLLocationCoordinate2D(latitude: latitude, longitude: longitude) let degrees = CLLocationDegrees(90) marker = GMSMarker(position: position) marker.groundAnchor = CGPoint(x: 0.5, y: 0.5) marker.rotation = degrees — Harshit, Sep 26 '19 at 12:47

score 7 · Answer 2 · answered Mar 10 '15 at 04:55

7

I figured out how to do it after reading Google Maps Documentation very closely. I believe this is how it was intended to be done.

UIImage *markerIcon = [UIImage imageNamed:@"markericon.png"];
markerIcon = [markerIcon imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, (markerIcon.size.height/2), 0)];
self.marker.icon = markerIcon;

answered Mar 10 '15 at 04:55

Nicholas Mata

796
1
9
19

I tried this method and it looks like it works but it causes some unintended side effects... doing this *does not shift the tappable area* so the area outside the original marker's rect will not be tappable. – Spencer Sep 05 '17 at 16:34
I tried it but not working. but this issue can be solved using Marker.groundAnchor = CGPoint(0.5, 0.5); for obj c and marker.groundAnchor = CGPoint(x: 0.5, y: 0.5) for swift – Harshit Sep 26 '19 at 12:44

score 5 · Answer 3 · answered Jun 27 '20 at 17:14

In Swift 5

    let marker: GMSMarker = GMSMarker() // Allocating Marker
    marker.title = "Your location" // Setting title
    marker.snippet = "Sub title" // Setting sub title
    marker.icon = UIImage(named: "radio") // Marker icon
    marker.appearAnimation = .pop // Appearing animation. default
    marker.position = CLLocationCoordinate2D.init(latitude: 26.8289443, longitude: 75.8056178)
    
    marker.groundAnchor = CGPoint(x: 0.5, y: 0.5)  // this is the answer of this question
            
    DispatchQueue.main.async { // Setting marker on mapview in main thread.
        marker.map = self.googleMapView // Setting marker on Mapview
    }

GMSMarker icon from center (iOS)

3 Answers3

Linked