I also waste time on the following social networks:

Before I begin to explain how to do this I have to state that I am not sure if it Violates Googles TOS or not.  I created this article due to how much digging I had to do in order to figure out how to accomplish this task.

While there is not a Cocoa API for working with Google Maps on OS X (there is a closed framework on the iPhone) it is still very possible to include a Google Map into your application and allow your application to interact with it.  There is so much you can do with Google Maps that I cannot possibly cover everything in this article, I am going to cover only the basics.  If you work through this article your finished application will contain 3 elements on the view.  A WebView and 2 Buttons as shown in the image above.

First we need to create a new Project in XCode, be sure to choose Cocoa Application.  Once we have the project created you need to create a new class called map, make sure that both the .h and .m files are created.  Now we will be adding 3 outlets and 2 actions to our code.  Let’s start with the header file.

1
2
3
4
5
6
7
8
9
10
11
12
#import <Cocoa/Cocoa.h>
#import <WebKit/WebKit.h>
 
@interface map : NSObject {
	IBOutlet WebView *mapView;
	IBOutlet NSButton *zoomIn;
	IBOutlet NSButton *zoomOut;
}
 
- (IBAction)zoomIn:(id)sender;
- (IBAction)zoomOut:(id)sender;
@end

Notice that above I added the 3 outlets for the WebView and 2 buttons. I also added the 2 actions called zoomIn and zoomOut. I think those are pretty self-explanatory, once you link the buttons to the action you will zoomIn and zoomOut on the map. Now let’s look at the actual code for our class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#import "map.h"
#import <WebKit/WebKit.h>
 
@implementation map
-(void)awakeFromNib
{
    NSURL *mapFileURL = [NSURL URLWithString:@"http://www.domain.com/map.html"];
    [[mapView mainFrame] loadRequest:[NSURLRequest requestWithURL:mapFileURL]]; 
    [[[mapView mainFrame] frameView] setAllowsScrolling:NO];
    [mapView setNeedsDisplay:YES];
}
 
-(IBAction)zoomIn:sender{
    id map = [mapView windowScriptObject];
    NSString *jsCmd = @"map.zoomIn();";
    [map evaluateWebScript:jsCmd];
}
 
-(IBAction)zoomOut:sender{
    id map = [mapView windowScriptObject];
    NSString *jsCmd = @"map.zoomOut();";
    [map evaluateWebScript:jsCmd];
}
@end

Note that in both the header and implementation file I have included the WebKit headers. This is necessary since we are going to be using a WebView to show the map. The first method you should look at is the awakeFromNib method. This is run when the window is first loaded and will display the map on the WebView. The first thing we are doing is creating an NSURL object using a string. After-all we need to know where the HTML file is that we will be loading. Once we have the URL we tell the WebView that we want to use the mainFrame and load the request using the URL that we just created. We then tell the mainFrame’s frameView that we do not want to allow scrolling. I did this because no matter what I tried the scroll bars were appearing even when they should not have been. The last line we tell the mapView (WebView) to display.

Next we have created the actions for zooming in and out on the map. These are pretty basic they pretty much just send a JavaScript command to the WebView and tell it to evaluate it. Now these commands could be any valid GoogleMaps command. You are not limited to only zooming in and out.

For this application this is all of the code you need. You now need to open the XIB file and create an instance of your map class. Link the Buttons and WebView to the outlets and actions that you defined in your class. Save the interface and return to XCode.

Now we must create an HTML file that will be used to interact with the GoogleMaps. This is a file that should be stored on your server where your API key is issued for. Also note that you will have to add your API KEY to the url in this HTML file so that Google knows who you are.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps with Cocoa</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key="
            type="text/javascript"></script>
  </head>
 
  <body style="width:100%;height:100%">
    <div id="map_area" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0"></div>
    <script type="text/javascript">
        map = new GMap2(document.getElementById("map_area"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    </script>
 
  </body>
</html>

The last and final step for making this work is a big one. You need to link the WebKit framework to your application. Once you have done this you should be able to run the application without any issues.

I have also uploaded the XCode Project which uses a local HTML file (inside the app) for you to see how it works in whole, however this is probably not the best way to do things.