Using maps in a native App

Question

Building an ios app using apache cordova 2.1. Building and styling is going fine but maps are not.

I found a plugin for the maps but simply cannot get it to work: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/MapKit

I also found an example html file but could : https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MapKitPlug/example

1/ So i added the MapKit framework into xcode which was pretty straight forward: http://blog.thinketg.com/blog/david-brainer-banker/xcode-4-tips-adding-frameworks-to-your-project

2/ Added the .m and .h files

3/ Added and linked the .js file to my index.html

4/ copied the example html above.

5/ Added the Mapkit to the .plist file as per the instructions

When I try to run the map I get the following errors:

2012-11-05 14:21:29.505 sawdaysApp[25398:c07] Multi-tasking -> Device: YES, App: YES
2012-11-05 14:21:30.895 sawdaysApp[25398:c07] CDVPlugin class MapKitView (pluginName: MapKitView) does not exist.
2012-11-05 14:21:30.895 sawdaysApp[25398:c07] ERROR: Plugin 'MapKitView' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2012-11-05 14:21:30.896 sawdaysApp[25398:c07] FAILED pluginJSON = [null,"MapKitView","showMap",[]]
2012-11-05 14:21:30.896 sawdaysApp[25398:c07] CDVPlugin class MapKitView (pluginName: MapKitView) does not exist.
2012-11-05 14:21:30.896 sawdaysApp[25398:c07] ERROR: Plugin 'MapKitView' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2012-11-05 14:21:30.897 sawdaysApp[25398:c07] FAILED pluginJSON = [null,"MapKitView","setMapData",[{"diameter":1000,"offsetTop":25,"lon":-123.104446,"buttonCallback":"cbMapCallback","lat":49.281467999999997,"height":360,"atBottom":true}]]

I assuming that the error is with the MapKitView in the CDVPluggin, but really not sure.

Has anyone had any experience with this and succeeded?

Answer 1

I'd just like to add two things:

1, That as of Cordova 2.3.0 the filename

Cordova.plist

Is now

yourProject-Info.plist

yourProject being what ever your project name is.

2, I found that you still need to 'Link Binary With Libraries' by doing the following:

• Click on your project
• Select Build Phases
• Click the arrow on Link Binary With Libraries
• Click Add
• Search for MapKit.framework and click Add

Answer 2

THIS WORKS. AT LAST :)

1 - Follow this guide to start the app http://docs.phonegap.com/en/2.1.0/guide_getting-started_ios_index.md.html

2 - Download and add mapkit plugin native files (all of them) in the plugins folder and the .js file in the www folder. https://github.com/phonegap/phonegap-plugins/tree/master/iOS/MapKit. Make sure you drage the pluggins folder to the pluggins folder in xcode otherwise the app will not link the files properly.

3 - Whitelist * to whitelist all the domains and Add the plugin reference on Cordova.plist MapKitView as value and key

4 - Donwloaded and included into the sawdaysTestApp/pluggins folder JSONKit.h and JSONKit.m https://github.com/johnezang/JSONKit

5 - Change mapkit.h and .m

#ifdef CORDOVA_FRAMEWORK
#import <Cordova/CDVPlugin.h>
#else
#import "CDVPlugin.h"
#endif

to

#import <Cordova/CDVPlugin.h>

and

change mapkit.m

from

#ifdef CORDOVA_FRAMEWORK
// PhoneGap >= 1.2.0
#import <Cordova/JSONKit.h>
#else
// https://github.com/johnezang/JSONKit
#import "JSONKit.h"
#endif


to

    #import "JSONKit.h"

1. Get the example from https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MapKitPlug/example/index.html. Copy and paste entire example into index.html.

7 - Change the index.html

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="MapKitPlug.js"></script>

to//

<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="MapKit.js"></script>

8 - Run the simulator. click the show map button.