Using MapKit Plugin for PhoneGap with XCode 4 and iOS

[OUTDATED]

This is the inaugural post on this new blog I just started. The goal of this blog is to document little code snippets and fixes for the semi common and not so common problems that aren’t well documented elsewhere.

Recently I’ve been delving into the wonderful world of PhoneGap in order to make my first iPhone App. My current PhoneGap stack is PG + jQTouch + PhoneGap Plugins (which are JS libraries that talk to native libraries, frameworks, etc…). I am using PhoneGap Plugins as much as possible as they make apps feel more native (and less buggy).

I tussled with MapKit for iOS for quite some time, until Shazron at Nitobi gave me some help in #phonegap on FreeNode. The problem I was experiencing was mostly because I was using XCode 4 which does things a little differently.

Step 1.

Add the MapKit Plugin files to your project

/ProjectName/Plugins ( drag these files into the file path in your XCode view)

  • AsyncImageView.h
  • AsyncImageView.m
  • MapKit.h
  • MapKit.m
  • PGAnnotation.h
  • PGAnnotation.m

/www/

  • MapKitPlug.js
Step 2.

Add the appropriate HTML + JS that is found in the example/index.html to your PhoneGap HTML page.

Step 3.

Update both the following files in XCode

/ProjectName/Plugins/MapKit.h (source)

OLD:

#import "PhoneGapCommand.h"
NEW:

#ifdef PHONEGAP_FRAMEWORK
    #import <PhoneGap/PhoneGapCommand.h>
#else
    #import "PhoneGapCommand.h"
#endif

/ProjectName/Plugins/MapKit.m

OLD:

#import "SNJsonParser.h"
#import "SNJSON.h"
NEW:

#import <PhoneGap/SBJsonParser.h>
#import <PhoneGap/SBJSON.h>

Step 4.

Add the MapKit core framework to your project. Follow the instructions outlined here

  1. In the project navigator, select your project
  2. Select your target
  3. Select the ‘Build Phases’ tab
  4. Open ‘Link Binaries With Libraries’ expander
  5. Click the ‘+’ button
  6. Select your framework
  7. (optional) Drag and drop the added framework to the ‘Frameworks’ group
Finished! Build + Run your app… YAY!

Considering all these steps have been performed correctly your app should now display a nice native map layer with a pin dropped on Nitobi’s HQ :)

Conclusion

As written at the top of this post- it is outdated, both XCode and PhoneGap have changed A LOT in 1.5 years since I wrote this- hopefully this post was helpful in helping you undersand how to use PhoneGap and the MapKit plugin work together

About bnvk

Fixing email, bringing privacy & encryption to the masses @MailpileTeam Designer, Hacker, Crypto Currency Curious, Decentralization, Freedom, #IndieWeb
This entry was posted in PhoneGap and tagged , , , , , . Bookmark the permalink.

24 Responses to Using MapKit Plugin for PhoneGap with XCode 4 and iOS

  1. Nice article! btw, some of what you mentioned here is in an issue as well (which I put up after our conversation):

    https://github.com/phonegap/phonegap-plugins/issues/31

  2. brennannovak says:

    Ah cool cool. Thanks for posting that as I imagine your posts carry more weight than mine at the moment ;)

  3. alyosha47 says:

    I can’t make it build. First I made sure the vanilla phonegap app launched no problem, then I did exactly letter for letter per your instructions, and then when I got a whole sheetful of errors on build, I tried running your own code, and got the same sheetful of errors.

    Making this plugin work would really help me out. Do you have any idea what I could be doing wrong?

    And THANK YOU for the very clear and easy explanation!

    • alyosha47 says:

      Well, looking at the very first error on the list, there doesn’t seem to be a PhoneGapCommand.h file anywhere about. Is its absence somehow new? Any help would be truly appreciated!

      • alyosha47 says:

        So Apparently PhoneGapCommand.h is now called PGPlugins.h.
        All the files at github are actually up to date with this.
        So I started over with all the fresh github files, and now it builds with no problems.

        Except that I get a blank screen with no map on it. If you consider that a problem. There are buttons at the bottom to control the map, but no map.

        Hmmm. Definitely getting closer though.

  4. alyosha47 says:

    Solved. You need to add the plugin in the Plugins array as MapKitView / MapKitView in PhoneGap.plist

    Hoping my struggles will benefit future generations…

  5. brennannovak says:

    Heya! I just got your comments… glad you figured it out. Sorry to hear you had a hard time and that my post didn’t quite work for ya… PhoneGap as well as the plugins seems to have been modified quite a bit since I wrote this. Thanks for documenting. I’ll try to update my post :)

  6. fred says:

    I grabbed your sample code but get errors when I attempt to build,

    e.g

    Property ‘title’ ‘copy’ attribute does not match the property inherited from ‘MKAnnotation’
    /Users/fredgillen/Downloads/MapKit Demo/MapKit Plugin Demo/MapKit Plugin Demo/Plugins/MapKit.m:111:2: error: use of undeclared identifier ‘SBJSON’ [3]

    Any help welcome for this newbee

    TIA

    Fred

    • brennannovak says:

      Shoot. Sorry Fred. My post is more than a few months old and many the quirky things which i found frustrating, which inspired me to do this post have since been fixed in PhoneGap as well as the plugin. I would suggest downloading the most recent version of each libraries and just using my JS in the html file!

  7. Phempt says:

    Hi!
    I’m going to make a simple app with mapkit.. but with your file examples the pins are not showed..

    Have you ever had this problem?

  8. Phempt says:

    Thanks! I also try to re-do the app dowloading the current plugin (from github)… but the result is the same :'(

    thanks anyway for your fast reply!

  9. Mikael says:

    Hi,
    I could manage to have phonegap and mapkit to work together, thanks to all these posts.
    I’m quite new to xcode and I have a visual problem. I have a phonegap html page with a mapkit view above in the middle. I thought that inputing text with the keyboard would have its bounce animation move every UIView upwards, but it only moves the phonegap view, so the map remains in the center which creates a gap in the background.

    Is there a way to fix this so both UIView move together? I tried playing with UIKeyboardWillShowNotification to:
    -Add a translation animation on the map kit view, which doesn’t move at the same time as phonegap’s view.
    -First removing all associations to UIKeyboardWillShowNotification in the app, in order to affect a translation on the app controller’s main window object, so everything moves nicely together, but I can’t get it to work yet, because calling NotificationCenter removeObserver on UIKeyboardWillShowNotification doesn’t seem to work?

  10. Waleed Khan says:

    hello…!!!! i m adding mapkit to my phonegap project. and i using phonegap 1.4.0 and it is not working. i think they removed the Json Files from 1.4.0. what should i do

  11. m laan says:

    Is there a any way to use this plugin with directions from pin a to pin b. Showing the pins is ‘nice’ but creating directions from users current location would be awesome.

  12. Kaloyan says:

    Hi,
    I have on question – if I use the MapKit plugin I won’t be able to use the PhoneGap service to create apps for other platforms, right? My app will be available only for iPhone.
    Regards

  13. Ryan Aldred says:

    Can anyone confirm the licensing requirements of using the PhoneGap MapKit?
    …I am looking to use maps within my new iOS application (chargeable), but believe GoogleMaps charge upwards of £7,500/yr. Am I still subject to this if using through MapKit (which is clearly still GoogleMaps at its core).

    Any assistance would be much appreciated…

  14. keune says:

    Has anyone tried putting a custom button on the map or opening the map as a different view on IOS?

  15. Helen says:

    Hi There – I have downloaded your code, but when I put it into my xcode, it is missing the PhoneGap.framework – any ideas where it is to link it too?

  16. Safari says:

    Works great on iOS 6. Is it posible to load the map automatically into a div tag?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s