Zachary Powell

Software Programmer

Zachary Powell

Download my CV Send me a Message

Display location and custom pin on Google Map in iOS

Zachary Powell - 06/01/2016

Today we will look at how to Display the users current location within a Google Map, and also look at using custom pins in iOS. Much the same as we have already covered for Android HERE and HERE, also make sure to check out our last guide on setting up Google Maps for iOS HERE (if you have not already!)

Display User Location

Displaying the users location on the Google map within iOS is a very simple process. Once we have the map view set up, we just need to set myLocationEnabled to YES with self.mapView.myLocationEnabled = YES;. From here, we will have our location displayed on the map. However, the map will not move to the users current location or move the map as the user moves.

Jump to Users current location

To do this, we first need to make some changes to the mapview set up:

-(void)viewDidLoad{
...
    self.mapView.myLocationEnabled = YES;
    self.mapView.mapType = kGMSTypeNormal;
    self.mapView.settings.compassButton = YES;
    self.mapView.settings.myLocationButton = YES;
    self.mapView.delegate = self;
    [_mapView addObserver:self
               forKeyPath:@"myLocation"
                  options:NSKeyValueObservingOptionNew
                  context:NULL];
    dispatch_async(dispatch_get_main_queue(), ^{
        _mapView.myLocationEnabled = YES;
    });
...
}

So we have now added the myLocationEnabled, as well as adding the compass and myLocation button. We then need to set up a delegate to handle updating the map view to move to the users location. This is set by adding the Observer. We then need to create the actual function that will be called.

- (void)observeValueForKeyPath:(NSString *)keyPath
                      ofObject:(id)object
                        change:(NSDictionary *)change
                       context:(void *)context {
       
        CLLocation *location = [change objectForKey:NSKeyValueChangeNewKey];
        longitude = location.coordinate.longitude;
        latitude = location.coordinate.latitude;
        
        _mapView.camera = [GMSCameraPosition cameraWithTarget:location.coordinate
                                                         zoom:14];
    }
}

The above code is called when ever the location changes. We get the new location object, take the longitude and latitude and then finally move the maps camera to that location. This way, the map will always be centred on the users location as they move.

Plot Marker with default pin

Much like in Android, creating a Marker and plotting it on the Map is very easy to do, but offers a range of features we can use to customise them. Lets first look at a very simple marker.

GMSMarker *marker = [[GMSMarker alloc] init];
marker.position = CLLocationCoordinate2DMake(53.784426, -1.735840);
marker.title =  @"Test Pin";
marker.map = _mapView;

Here we create the new GMSMarker object then set its position and title, before finally setting its map as our map view. This is a very simple set up and plenty of other options are available check out THIS

Plot Marker with custom pin colour

Another example is setting the icon. We can either use a custom image or take the normal Marker and load a different colour.

UIImage *green = [GMSMarker markerImageWithColor:[UIColor greenColor]];
GMSMarker *marker = [[GMSMarker alloc] init];
marker.position = CLLocationCoordinate2DMake(53.785426, -1.735800);
marker.title = @"Green Marker";        
marker.icon = green;
marker.map = _mapView;

Here we create a green Marker icon, but we could use any UIColor.

As always, if you have any questions, comment below.

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Tags: ,

“ Any fool can write code that a computer can understand. Good programmers write code that humans can understand. ”

-Martin Fowler