We work with iPhone SDK MapKit framework

Not so long ago I was working on an application where it was necessary to display a map directly in it. I tried to find tips on this topic on the Internet, but nothing happened. It was not possible to find a decent lesson with an explanation of how to show the address on the map in the application. So I decided to write my own lesson and I hope it will be useful for you.

I propose to create a simple application that will display the address entered by the user directly on the map. Let's call it " MapApp ".

1. First, create an application of the type " Window based " and name the project " MapApp ".
2. Add the " MapKit " framework to the project. (Hold down the key, click on the " Frameworks " folder and execute " Add -> Existing Frameworks ".)
3. Create a new view controller class and name it " MapViewController ." Add a text box, a button and a map view.
')

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@ interface MapViewController : UIViewController<MKMapViewDelegate> {
IBOutlet UITextField *addressField;
IBOutlet UIButton *goButton;
IBOutlet MKMapView *mapView;
}

@end

* This source code was highlighted with Source Code Highlighter .

4. Now create a xib file named "MapView.xib". As a type, specify “MapViewController”, add “UITextField”, “UIButton” and “MKMapView” elements to it.



Be sure to check that the delegate for the " mapView " is configured for the controller class.

5. When finished with the view, update " MapAppDelegate " by loading the view controller and the view itself.

6. Build the application and check if the view is correctly displayed. Now we have an interface for entering the address and a button for displaying the desired point on the map.

7. Add a class to display annotations for the location. Let's call it " AddressAnnotation ".

- ( void )applicationDidFinishLaunching:(UIApplication *)application {
mapViewController = [[MapViewController alloc] initWithNibName: @"MapView" bundle:nil];
[window addSubview:mapViewController.view];
[window makeKeyAndVisible];
}

* This source code was highlighted with Source Code Highlighter .

This class will display the title and subtitle of the location on the map.

8. I propose to add a function that will be called when you click on the " Go " button. The code contained in it will be responsible for outputting the address to the card. Let's call this action " showAddress ".

- (IBAction) showAddress {
//
[addressField resignFirstResponder];
MKCoordinateRegion region;
MKCoordinateSpan span;
span.latitudeDelta=0.2;
span.longitudeDelta=0.2;

CLLocationCoordinate2D location = [self addressLocation];
region.span=span;
region.center=location;
if (addAnnotation != nil) {
[mapView removeAnnotation:addAnnotation];
[addAnnotation release];
addAnnotation = nil;
}
addAnnotation = [[AddressAnnotation alloc] initWithCoordinate:location];
[mapView addAnnotation:addAnnotation];
[mapView setRegion:region animated:TRUE];
[mapView regionThatFits:region];
}

* This source code was highlighted with Source Code Highlighter .

9. The map view displays the location, focusing on its longitude and latitude, and we have the address in text form. Accordingly, you need to convert it to " CLLocationCoordinate2D ". Note: in the above code for this conversion, we call the function " addressLocation ".

-(CLLocationCoordinate2D) addressLocation {
NSString *urlString = [NSString stringWithFormat: @"http://maps.google.com/maps/geo?q=%@&output=csv" ,
[addressField.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
NSString *locationString = [NSString stringWithContentsOfURL:[NSURL URLWithString:urlString]];
NSArray *listItems = [locationString componentsSeparatedByString: @"," ];

double latitude = 0.0;
double longitude = 0.0;

if ([listItems count] >= 4 && [[listItems objectAtIndex:0] isEqualToString: @"200" ]) {
latitude = [[listItems objectAtIndex:2] doubleValue];
longitude = [[listItems objectAtIndex:3] doubleValue];
}
else {
//
}
CLLocationCoordinate2D location;
location.latitude = latitude;
location.longitude = longitude;

return location;
}

* This source code was highlighted with Source Code Highlighter .

The above code reads the address entered in the text field and gets the location from maps.google.com in a CSV format. The next step is to find the latitude and longitude in the file. The return code google 200 means that everything went well.

10. The last step is to add a delegate function that will display an annotation on the map.

- (MKAnnotationView *) mapView:(MKMapView *)mapView viewForAnnotation:(id ) annotation{
MKPinAnnotationView *annView=[[MKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier: @"currentloc" ];
annView.pinColor = MKPinAnnotationColorGreen;
annView.animatesDrop=TRUE;
annView.canShowCallout = YES;
annView.calloutOffset = CGPointMake(-5, 5);
return annView;
}

* This source code was highlighted with Source Code Highlighter .

The function creates an annotation view (green pin) with an annotation previously added to " MapView ". When you click on a pin, a heading and subtitle appear.

Here is what the map will look like after loading:





We have analyzed a simple example of displaying a map inside an application. I hope you find it useful.

The source code for the lesson can be downloaded here .