Question

I’m developing a Cocoa app using XCode 4. One of the windows has a tab view. One of the tabs is supposed to display a Google Maps map of a location. I added a WebView (WebKit framework) to the tab and defined it as an outlet so I can manipulate it with the window controller.

I managed to display a URL (maps.google.com) inside the web view using the following:

    [[mapView mainFrame] loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://maps.google.com"]]];

However this is not the result I’m looking for. Ideally I want to have a map view similar as in iPhoto. From this tutorial I understand you will have to have an HTML file on a server to make things work. As my app is a local OS X app (not involved with any server), I was wondering if there are any ways of doing this differently and have the HTML local in de directory of the app (not sure how this would work with the required Google Maps API key which is tied to a URL)?

EDIT:

I’ve solved part of this. You can actually store an HTML file locally (I put mine in the “Supporting Files” folder of my project). You can then access this file using the following code:

    NSString *pagePath;
NSBundle *aBundle = [NSBundle mainBundle];
pagePath = [aBundle pathForResource:@"test2" ofType:@"html"];
// make a file: URL out of the path
NSURL *pageURL = [NSURL fileURLWithPath: pagePath];

Next step is to display the map using the following:

[[mapView mainFrame] loadRequest:[NSURLRequest requestWithURL: pageURL]];

This displays the map inside my WebView. As a starting point I used the sample from the Google Maps API tutorial here. This particular example displays a map centered on Stockholm, Sweden.

The one thing I have not managed to solve is how to access the Javascript function that displays the map (in the above example that would be the initialize() function called using the body onload). For my situation I want to tweak this function to accept two parameters, a longtitude and a latitude, and then call it from my Objective-C object that displays the map. According to the documentation from Apple it is possible to call Javascript from within Objective-C using an instance of WebScriptObject which is accessible through the WebView instance:

    id wso = [mapView windowScriptObject];

Then using the callWebScriptMethod:withArguments: one should be able to execute a Javascript function. However, if I remove the onload of the body tag and call the Javascript initialize() function using the WindowScriptInstance, the map does not show. Anybody an idea what I’m doing wrong?

Answer 1

The final piece of the puzzle is getting the timing right. You cannot do anything with Javascript until your WebView is done loading. This is signalled back to your controller by sending webView:didFinishLoadForFrame: to your controller. Check out Apple documentation on WebFrameLoadDelegate Protocol Reference here. Your controller should implement some of these methods, depending on the required behaviour (protocol methods are optional).

Once this method is run, the WebView is ready for work and you can access your Javascript functions in them:

- (void) webView:(WebView *) webView didFinishLoadForFrame:(WebFrame *) frame {
    NSArray *args = [NSArray arrayWithObjects:
                     [NSNumber numberWithFloat: 59.325225],
                     [NSNumber numberWithFloat:18.0700], nil];

    [[webView windowScriptObject] callWebScriptMethod:@"initialize" withArguments:args];
}

A good point of reference is the CallJS sample app which I dissected to make the whole thing work.