How to embed a map on the iPhone
Originally posted at http://www.richardhyland.com/diary/2009/10/17/how-to-embed-a-map-on-the-iphone/ (Posterous keeps messing with the code layout, go the original post on my website for the working version!)
In the first of a few posts I intend to make I’ll demonstrate some examples using the iPhone SDK.
This example will demonstrate how to embed a map, using the MKMapKit framework inside a UIView using the iPhone SDK. Note you must be using iPhone OS 3.0 or higher for this to work. The ultimate aim is to get a UIView that looks similar to this.
For this example I will assume you are already familiar with navigation and UIViews in the SDK (and so I won’t cover how to get the navigation bar at the top of this screenshot)
Add the framework
First up you must go to the Frameworks folder of your XCode project and add the existing framework of MKMapKit.
Then inside the header file for your view add
- #import <MapKit/MapKit.h>
Adding MapKit references to the header
Now we must add the mapKit instance to the header as well as the MapKit delegate
- @interface MapKitViewController : UIViewController <mkmapviewdelegate> {
- MKMapView *mapView;
- }
- -(void)displayMap;
- </mkmapviewdelegate>
Initialize the Map
- - (void)viewDidLoad {
- mapView = [[MKMapView alloc] initWithFrame:self.view.bounds];
- mapView.delegate=self;
- [self.view addSubview:mapView];
- [NSThread detachNewThreadSelector:@selector(displayMap) toTarget:self withObject:nil];
- }
- -(void)displayMap {
- MKCoordinateRegion region;
- MKCoordinateSpan span;
- span.latitudeDelta=0.2;
- span.longitudeDelta=0.2;
- CLLocationCoordinate2D location;
- location.latitude = -35;
- location.longitude = 146.2381;
- region.span=span;
- region.center=location;
- [mapView setRegion:region animated:TRUE];
- [mapView regionThatFits:region];
- }
- - (void)dealloc {
- [mapView release];
- [super dealloc];
- }
This will give us a map fitting the screen with the region and zoom level set to best fit the coordinates given. Note that I have physically defined the coordinates here in this example, you can use something like the Google GeoCode API to convert addresses, etc to coordinates. I won’t cover that here.
Changing the map type
In the example above is a tool bar allowing you to switch map types
Let’s define the toolbar in the header file inside the @implementation
- UISegmentedControl *buttonBarSegmentedControl;
Now inside the main code inside ViewDidLoad we add
- buttonBarSegmentedControl = [[UISegmentedControl alloc] initWithItems:
- [NSArray arrayWithObjects:@"Standard", @"Satellite", @"Hybrid", nil]];
- [buttonBarSegmentedControl setFrame:CGRectMake(30, 10, 280-30, 30)];
- buttonBarSegmentedControl.selectedSegmentIndex = 0.0; // start by showing the normal picker
- [buttonBarSegmentedControl addTarget:self action:@selector(toggleToolBarChange:) forControlEvents:UIControlEventValueChanged];
- buttonBarSegmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
- buttonBarSegmentedControl.backgroundColor = [UIColor clearColor];
- [buttonBarSegmentedControl setAlpha:0.8];
- [self.view addSubview:buttonBarSegmentedControl];
Then we must add the function for what happens when we tap on the tool bar
- - (void)toggleToolBarChange:(id)sender
- {
- UISegmentedControl *segControl = sender;
- switch (segControl.selectedSegmentIndex)
- {
- case 0: // Map
- {
- [mapView setMapType:MKMapTypeStandard];
- break;
- }
- case 1: // Satellite
- {
- [mapView setMapType:MKMapTypeSatellite];
- break;
- }
- case 2: // Hybrid
- {
- [mapView setMapType:MKMapTypeHybrid];
- break;
- }
- }
- }
In the next example, coming soon, I’ll cover how to add the annotations (the small pins) to the map
